When adding a border to a list item, ensure that it does not extend

I apologize if this question has been asked before numerous times. Despite my extensive search efforts, I have not been able to find a solution. How can I ensure that the border-bottom of ul li extends to full width?

https://i.sstatic.net/2IrvY.png

body {
 background: blue;
}


.Table .Content {
  background: #fff;
  color: #fefeff;
}

.Table .Content ul {
  padding: 15px 20px 10px;
  margin: 0;
  text-align: left;
}

.Table .Content ul li {
  font-size: 14px;
  padding: 12px 0;
  border-bottom: 1px solid #e1e1e1;
  color: #000;
}
<div class="container">
  <div class="row">
    <div class="col-md-6">
      <div class="Table">
        <div class="Content">
          <ul>

            <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean semper at sapien ut accumsan. Fusce consequat nec eros vel suscipit. Vestibulum sit amet ornare erat, sed porttitor metus.</li>
            <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean semper at sapien ut accumsan. Fusce consequat nec eros vel suscipit. Vestibulum sit amet ornare erat, sed porttitor metus.</li>
            <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean semper at sapien ut accumsan. Fusce consequat nec eros vel suscipit. Vestibulum sit amet ornare erat, sed porttitor metus.</li>
            <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean semper at sapien ut accumsan. Fusce consequat nec eros vel suscipit. Vestibulum sit amet ornare erat, sed porttitor metus.</li>
            <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean semper at sapien ut accumsan. Fusce consequat nec eros vel suscipit. Vestibulum sit amet ornare erat, sed porttitor metus.</li>
            <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean semper at sapien ut accumsan. Fusce consequat nec eros vel suscipit. Vestibulum sit amet ornare erat, sed porttitor metus.</li>

          </ul>
        </div>
      </div>
    </div>
  </div>
</div>

Your response would be greatly appreciated.

htmlcss

Answer №1

To adjust the spacing, apply padding to the left or right of the li elements instead of the ul

.Table .Content {
  background: #fff;
  color: #fefeff;
}

.Table .Content ul {
  padding: 15px 0px 10px;
  margin: 0;
  text-align: left;
  list-style-position:inside;
}

.Table .Content ul li {
  font-size: 14px;
  padding: 12px 20px;
  border-bottom: 1px solid #e1e1e1;
  color: #000;
}
<div class="container">
  <div class="row">
    <div class="col-md-6">
      <div class="Table">
        <div class="Content">
          <ul>

            <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean semper at sapien ut accumsan. Fusce consequat nec eros vel suscipit. Vestibulum sit amet ornare erat, sed porttitor metus.</li>
            <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean semper at sapien ut accumsan. Fusce consequat nec eros vel suscipit. Vestibulum sit amet ornare erat, sed porttitor metus.</li>
            <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean semper at sapien ut accumsan. Fusce consequat nec eros vel suscipit. Vestibulum sit amet ornare erat, sed porttitor metus.</li>
            <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean semper at sapien ut accumsan. Fusce consequat nec eros vel suscipit. Vestibulum sit amet ornare erat, sed porttitor metus.</li>
            <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean semper at sapien ut accumsan. Fusce consequat nec eros vel suscipit. Vestibulum sit amet ornare erat, sed porttitor metus.</li>
            <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean semper at sapien ut accumsan. Fusce consequat nec eros vel suscipit. Vestibulum sit amet ornare erat, sed porttitor metus.</li>

          </ul>
        </div>
      </div>
    </div>
  </div>
</div>

Answer №2

.Box .Content {
  background: #fff;
  color: #fefeff;
}

.Box .Content ul {
  padding: 15px 20px 10px;
  margin: 0;
  text-align: left;
}

.Box .Content ul li {
  font-size: 14px;
  padding: 12px 0;
  border-bottom: 1px solid #e1e1e1;
  color: #000;
  list-style-position: inside;
}
<div class="container">
  <div class="row">
    <div class="col-md-6">
      <div class="Box">
        <div class="Content">
          <ul>

            <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean semper at sapien ut accumsan. Fusce consequat nec eros vel suscipit. Vestibulum sit amet ornare erat, sed porttitor metus.</li>
            <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean semper at sapien ut accumsan. Fusce consequat nec eros vel suscipit. Vestibulum sit amet ornare erat, sed porttitor metus.</li>
            <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean semper at sapien ut accumsan. Fusce consequat nec eros vel suscipit. Vestibulum sit amet ornare erat, sed porttitor metus.</li>
            <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean semper at sapien ut accumsan. Fusce consequat nec eros vel suscipit. Vestibulum sit amet ornare erat, sed porttitor metus.</li>
            <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean semper at sapien ut accumsan. Fusce consequat nec eros vel suscipit. Vestibulum sit amet ornare erat, sed porttitor metus.</li>
            <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean semper at sapien ut accumsan. Fusce consequat nec eros vel suscipit. Vestibulum sit amet ornare erat, sed porttitor metus.</li>

          </ul>
        </div>
      </div>
    </div>
  </div>
</div>

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

"Can someone provide guidance on properly aligning an image in a div

My deadline for my year 11 task is just one day away and I've tried multiple solutions, but it seems like I might have implemented them incorrectly in my code. I really need help! Unfortunately, I don't have a fiddle example to share because I&ap ...

htmlcss

The submit button is unresponsive and does not react to any actions

Encountering a peculiar issue! My submit button is not responding to the action. Here is the code snippet in question: <script type="text/javascript"> function save_contact_information() { document.getElementById('User_Finder&apos ...

phpjavascriptjqueryhtml

What are some creative ways to incorporate a variety of images into my website?

Currently working on a webpage and running into an issue. I have a div called "background" where I am loading several images using the <img>-tag. The problem is that the images are set to float:left;, causing them to wrap onto a new line as they can& ...

javascripthtmlcss

Preventing the stacking of numerous animations triggered by jquery events

Hey there! I'm currently working on a webpage and utilizing the Transit library for 3D rotations and other CSS transformations. On this page, I have three links that are set to scale up by 1.2 times when hovered over. Everything seems to be working we ...

jqueryhtmlcssanimation

Which is quicker, generating a gradient using CSS or directly loading an image?

I am curious about the potential benefits of the new CSS3 styling techniques. However, I am unsure if the effort is worth it! (Question: Can jQuery be used to apply a vignetting effect to a webpage?) Appreciate any insights! ...

jqueryimagecsseffects

Loading CSS definitions in a style tag may not be supported by certain mobile browsers

I have encountered a strange issue with my single-page responsive application that uses angularjs and php. I have embedded all my JavaScript and CSS codes within <script> and <style> tags respectively. While it works perfectly on desktop browse ...

cssangularjsresponsive-designmobile-websitesingle-page-application

How can you prevent HTML from interpreting the characters '<' and '>'?

I am adding some content through JavaScript using innerHTML in a label, but nothing is showing up. I am retrieving data from an API response. { "answer_a": "<footer>", "answer_b": "<section>", ...

javascripthtmldictionary

Using the ico-moon icon in an HTML email for various email clients such as Outlook and Gmail

I would greatly appreciate it if someone could provide instructions on how to incorporate ico-moon icons into an email HTML, ensuring they can be properly displayed in various email clients such as Outlook and Gmail. ...

htmlcssiconshtml-email

I am attempting to update the background image pattern every time the page refreshes. Despite trying numerous codes, I have not been able to achieve the

Here is my code that I've been struggling with. I am trying to change the image on page refresh, but it's not working as expected. <SCRIPT LANGUAGE="JavaScript"> var theImages = new Array() theImages[0] = 'images/1.png' ...

javascriptphpcss

The initialization of the view keeps happening repeatedly

Currently, I'm in the process of developing a dashboard that bears some resemblance to this one Admin Dashboard Theme In my project, I am incorporating a fixed Right Side Sidebar similar to the one shown in this screenshot https://i.sstatic.net/7KdMY ...

javascripthtmlcssangularjsangular-ui-router

What is the method for eliminating <ol> elements that have a particular number of <

As a beginner in the world of html and css, I am reaching out for some assistance. My question is regarding how to remove the ol tags that contain 3 li elements without any class or id. Here is an example: <div class="text"> <ol> ...

jqueryhtmlcss

Jquery panoramic slider - Dynamically adjusting image width to fit screen size

Currently, I am attempting to implement a popular panning slider called Jquery Panning Slider for a website. The details regarding the markup structure, CSS, and jQuery can be found here: Slider Details. However, I encountered an issue with this slider. ...

jquerycssjquery-pluginssliderfullscreen

The arrow icon on the select control is not showing up as expected in a form that is using Bootstrap when viewed in the

On my form using Bootstrap with Firefox browser, the select control is missing its arrow icon on the right side: https://i.sstatic.net/HcFf6.png The HTML code I used for this element is as follows: <div class="container-fluid"> <form id="fo ...

htmlcsstwitter-bootstrap

Tips for dynamically altering the background color of the body in React

Is there a way to dynamically change the background color of the body on certain pages using Redux state? I'm encountering an issue where the color specified in the store is not recognized when passed in the componentDidMount() function. Here's ...

javascriptcssreactjsreact-redux

Using Angular JS to dynamically load an HTML template from a directive upon clicking a button

When a link is clicked, I am attempting to load an HTML template. A directive has been created with the templateUrl attribute to load the HTML file. Upon clicking the link, a function is called to append a custom directive "myCustomer" to a pre-existing di ...

javascriptjqueryhtmlangularjsangularjs-directive

Expand Navigation Bar upon Hover

My goal is to recreate a Navigation Bar similar to the one found on this website: I want the Navigation Block to expand and show Menu Items when hovered over, just like the example on the website mentioned above. I've attempted to use Bootstrap and ...

jqueryhtmlcsstwitter-bootstrap

What could be causing my Divs to not adjust their location automatically?

When using JQuery, I have a group of four tabs that initially appear as shown below: <ul class="tabs"> <li> <input type="radio" name="tabs" id="tab1" checked /> <label for="tab1">Item One</label> & ...

jquerycsstabs

Activate the button when a checkbox is ticked or when using the "select all" checkbox

I'm facing an issue with a script that should enable a button when at least one checkbox is selected and a checkbox for selecting all checkboxes is used. The problem arises when I select the "select all" checkbox as it activates the button, but if I ...

javascripthtmljquery

Having trouble incorporating custom elements with the document.execCommand function

I have been attempting to insert a custom element into an editable div using the document.execCommand method as described in detail on https://developer.mozilla.org/en-US/docs/Web/API/Document/execCommand. However, when I try to add a custom polymer eleme ...

htmlpolymer

Error Encountered: Element Type Mismatch in Root Div

In my quest to locate the root div element, I have implemented the following method: var parentDoc = window; while (parentDoc !== parentDoc.parent) { parentDoc = parentDoc.parent; } parentDoc = parentDoc.document; var divContent = parentDoc.getElement ...

javascriptjqueryhtmldom