ul li border bottom不是全宽

Question

如果这个问题可能重复很多，我感到非常抱歉。但我已经做了很多关于这个问题的搜索，但仍然无法找到解决方案。如何制作ul li border-bottom full width？

＆＃13;

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

非常感谢任何回应。

Answer 1

为此你需要给出左/右＆＃39;填充到li而不是ul

＆＃13;

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 2

.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>