CODEWITHSUNDEEP
htmlcss
Ace
Ace

Reputation: 325

ul li border bottom is NOT full width

I am very sorry if this question might be duplicated a lot. But I've done a lot of searching about this question but still cannot find a solution. How can I make ul li border-bottom full width?

enter image description here

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>

Any of the response will be greatly appreciated.

Upvotes: 0

Views: 100

Answers (2)

Super User
Super User

Reputation: 9642

For this you need to give 'left/right' padding to li instead of 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>

Upvotes: 1

Ashwin
Ashwin

Reputation: 323

.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;
  list-style-position: inside;
}
<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>

Upvotes: 0

Related Questions