Is there a reason the hr tag elements aren't extending to the full width within the list?

I am having trouble with my hr tag elements in the table I created - they are not spanning the full width like the line above them. I have tried adjusting the width property but it doesn't seem to be working. Can anyone offer advice or guidance on how to resolve this issue?

  #thing {
            border-style: solid;
            width: 50%;
        }
<div class="container-fluid bg-white py-4">
        <div class="container">


            <div class="tab-pane fade show active" id="thing" role="tabpanel" aria-labelledby="home-tab">

                <p>

                </p>
                <hr>
                <ol>
                    <li>

                    </li>
                    <p>
                    </p>
                    <hr>
                    <li>

                    </li>
                    <p>
                    </p>
                    <hr>
                    <li>

                    </li>
                    <p>

                    </p>
                    <hr>

                </ol>

            </div>

        </div>
    </div>

htmlcssbootstrap-5

Answer №1

Here are a couple of solutions that could help address the issue:

  1. You can try adjusting the left margin by adding some pixels to it. Alternatively, uncomment and modify the code below to set the exact width of the HR element within the div: 

     #thing {
            border-style: solid;
            width: 50%;
        }
hr:before {
      content: "";
    display: block;
    position: absolute;
    left: 0;        
    width: 50%;      
    border: 1px solid gainsboro;
}
hr {
  border:none;
}
    <div class="container-fluid bg-white py-4">
        <div class="container">


            <div class="tab-pane fade show active" id="thing" role="tabpanel" aria-labelledby="home-tab">

                <p>

                </p>
                <hr>
                <ol>
                    <li>

                    </li>
                    <p>
                    </p>
                    <hr>
                    <li>

                    </li>
                    <p>
                    </p>
                    <hr>
                    <li>

                    </li>
                    <p>

                    </p>
                    <hr>

                </ol>

            </div>

        </div>
    </div>

  2. An alternative approach is to set the margin-left property of the hr element to -40px.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Website route organization tool

Seeking assistance with implementing a route planning feature on my website. The user should be presented with multiple route options upon entering their origin and destination. Take a look at this reference site for inspiration: Any help would be great ...

phphtmlcsswebhttps

How can I retrieve the content from an iframe whenever its state is altered using jQuery?

I am currently working on a project where I need to extract the content from a hidden iframe and display it as HTML in a div every time the iframe changes its loading state. The goal is for it to appear as if the page is being redirected and downloading it ...

javascriptjqueryhtmliframe

Utilizing Python's BeautifulSoup library to extract specific elements from an HTML document

Just getting started with BeautifulSoup and I'm looking to extract specific elements that represent percentages - 98.2% and 94.2%. What I want to print is: apples: 98.2% bananas: 94.2% Any insights on how I can achieve this? Thanks in advance. <d ...

htmlpython-3.xbeautifulsoupextract

Creating a scrollable table body in Bootstrap 4

I am struggling to make a large table mobile-friendly using Bootstrap 4. The table can have up to 10 columns and 100 rows. I need a CSS solution that achieves the following: A fixed header with each column having the same width as its respective row An x/ ...

htmlcsstwitter-bootstrapresponsive-designbootstrap-4

Adding padding to the top causes the scrollbar to hide at the bottom in Firefox

My HTML page includes the following configured DIV: <div id="contentDiv" style="padding-top: 20px; padding-left: 20px; overflow: auto; height: 100%;" > The content within this DIV is large enough to require a vertical scrollbar. When viewed in IE, ...

cssfirefoxscrollbarpadding

Trouble with recognizing nested functions when calling them in an onClick event

Encountering a `not defined` error on the console when attempting to call nested functions with an `onClick` event in an HTML page. After searching for solutions without success, I suspect it may be a scope or closure issue, but I am unsure of how to addre ...

javascripthtml

Utilize a combination of min-height percentages and pixels on a single div element

Currently searching for a method to explain min-height: 500px; min-height: 100%; the reason behind my decision to utilize this? The div must be either 100% in size or larger to allow for overflow. The height should only be set to 500px when the screen i ...

css

What could be causing the issue with my filter page not being able to retrieve any results from the

I am currently working on a filter page that is designed to display results in a table based on the selection made from a dropdown list. While I have written the necessary code and no errors are being detected, the results from the database are not showing ...

phphtmlsqlsearchfilter

What steps do I need to follow in order to replicate the layout shown in this

I am struggling with creating a layout in CSS that resembles the one shown in this photo: enter image description here Here is the HTML structure I have, but I can't figure out how to style it properly. <ul class="list"> ...

htmlcsslayout

What are the steps to utilize vue.js for dynamically adjusting my sidebar based on a URL input?

Greetings to the amazing community of Vue.js enthusiasts, I am a novice looking to develop a single-page web application using vue.js. This application will consist of a fixed header and dynamic body content that changes based on user interactions. Here&a ...

javascripthtmlcssvue.js

Implementing a PHP form for seamless image uploads

I have been attempting to upload a form that includes an image. I have successfully retrieved the data for the brand name and other fields. However, I am encountering an issue with retrieving the image name and type. Can someone please assist me in ident ...

phphtml

Adjust the color palette size when the zoom level is modified in the responsive mode within Angular

I am currently working with Angular 15 and attempting to adjust the color palette size depending on the zoom level. <input #primaryColor (change)="colorChange($event,'primary')" formControlName="primaryColor" class="co ...

cssangularsassangular-material

How can I ensure a DIV is shown on every sub-page?

Is there a way to dynamically display a <div id="chatbox"> in all subpages without needing to manually edit each one? For example, adding this code to the main index.html file and having it appear on /products/index.html. ...

htmlcssindexing

Interactive Features in Vue Component

In my Vue Component, I have a prop named src that is bound to a :style attribute like this: <template> <section :class="color" class="hero" :style="{ backgroundImage: src && 'url(' + src + ')' }"> <slot> ...

cssvue.jsvuejs2vue-component

Showcase a Pair of Files Next to Eachother using HTML

I am a beginner with HTML and I am trying to accomplish a seemingly simple task. I have searched for similar questions and attempted the solutions provided, but none have worked for me. My goal is to have two documents displayed side by side on a web page ...

javascripthtmlcssimage

jQuery deduct a value from a given value

i have a full duration that is divided into multiple sections, the user needs to input the duration for each section i would like the system to calculate and display the remaining duration from the full duration, regardless of whether the user fills out ...

javascriptjqueryhtml

What is the process for assigning an ID to an object by clicking on an adjacent link in Django?

Trying to set an identifier for a CSV file's name so that clicking on a link next to it will lead to viewing the file itself on another webpage. Encountering the error message 'QueryDict' object has no attribute 'objects' Please ...

pythonhtmldjangodjango-rest-frameworkdjango-views

My goal is to populate all of these elements with Javascript

My goal is to have all the boxes filled with "excellent": https://i.sstatic.net/oHW6W.png let a = document.querySelectorAll('.select2-choice'); a.forEach((e) => {console.log(e)}) a.forEach((e) => {e.innerHTML = ` <span ...

javascripthtml

Guide to creating HTML file with SSI tags

Currently, my website uses Nginx SSI tags to dynamically include template files such as the header, footer, and sidebar. However, I need to provide the final HTML output to clients instead of running it on their browsers. The issue I'm facing is that ...

htmlnginxssi

Using JQuery to load a table and inject it with html()

I am looking to populate an HTML table within a specific div element. The HTML code is being loaded using the following jQuery function: $("#table_wrapper").hide(); $.get("<?echo base_url();?>schichtplan/employee_fields/"+plan_id+"true",function(da ...

javascriptjqueryhtmlcodeigniter