格式化段如MS Word

时间：2017-07-30 16:25:43

标签： html css

我想将段落格式化为MS Word（附图） enter image description here

这是我到目前为止所做的：

＆＃13;
＆＃13; 
ol {
  text-align: justify;
}

ol.first {
  list-style: upper-roman;
  list-style-position: inside;
}

ol.second {
  list-style: upper-latin;
  list-style-position: inside;
}

ol.third {
  list-style: lower-roman;
  list-style-position: inside;
}

ol li {
  display: inline-flex;
  margin-bottom: 5px;
  white-space: normal;
}

ol li .number {
  display: list-item;
}

ol li .content {
  margin-left: 15px;
}
＆＃13; 
<ol class="first">
  <li>
    <div class="number"></div>
    <div class="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur ipsum nisi, hendrerit vel tristique vel, ornare eget ligula. Quisque ipsum eros, rhoncus nec luctus et, interdum quis est. Quisque semper id magna sed iaculis. Vestibulum ornare aliquam
      neque nec consectetur. Curabitur molestie venenatis urna sed congue. Interdum et malesuada fames ac ante ipsum primis in faucibus.</div>
  </li>
  <li>
    <div class="number"></div>
    <div class="content">Phasellus vel convallis magna. Nam ex quam, lacinia ac facilisis et, tempor vitae elit. Duis sit amet urna scelerisque, molestie ipsum sed, ultricies orci. Duis ac purus congue, maximus enim ut, rutrum quam. Quisque porta bibendum ex, eget laoreet
      neque eleifend eu. Etiam ac leo a dui consectetur dictum ut in lacus.</div>
  </li>
  <li>
    <ol class="second">
      <li>
        <div class="number"></div>
        <div class="content">Labore exercitation fugiat mollit nostrud. Dolore quis id aliquip eu reprehenderit proident. Cupidatat ullamco esse non nisi minim et veniam sunt labore proident esse ea ex. Officia sint deserunt cupidatat amet irure esse fugiat laborum. Aliqua
          deserunt aute cillum enim officia irure ut officia proident ea. Quis sunt enim esse reprehenderit aute est.</div>
      </li>
      <li>
        <div class="number"></div>
        <div class="content">Labore exercitation fugiat mollit nostrud. Dolore quis id aliquip eu reprehenderit proident. Cupidatat ullamco esse non nisi minim et veniam sunt labore proident esse ea ex. Officia sint deserunt cupidatat amet irure esse fugiat laborum. Aliqua
          deserunt aute cillum enim officia irure ut officia proident ea. Quis sunt enim esse reprehenderit aute est.</div>
      </li>
      <li>
        <div class="number"></div>
        <div class="content">Labore exercitation fugiat mollit nostrud. Dolore quis id aliquip eu reprehenderit proident. Cupidatat ullamco esse non nisi minim et veniam sunt labore proident esse ea ex. Officia sint deserunt cupidatat amet irure esse fugiat laborum. Aliqua
          deserunt aute cillum enim officia irure ut officia proident ea. Quis sunt enim esse reprehenderit aute est.</div>
      </li>
    </ol>
  </li>
  <li>
    <div class="number"></div>
    <div class="content">Phasellus vel convallis magna. Nam ex quam, lacinia ac facilisis et, tempor vitae elit. Duis sit amet urna scelerisque, molestie ipsum sed, ultricies orci. Duis ac purus congue, maximus enim ut, rutrum quam. Quisque porta bibendum ex, eget laoreet
      neque eleifend eu. Etiam ac leo a dui consectetur dictum ut in lacus.</div>
  </li>
  <li>
    <div class="number"></div>
    <div class="content">Phasellus vel convallis magna. Nam ex quam, lacinia ac facilisis et, tempor vitae elit. Duis sit amet urna scelerisque, molestie ipsum sed, ultricies orci. Duis ac purus congue, maximus enim ut, rutrum quam. Quisque porta bibendum ex, eget laoreet
      neque eleifend eu. Etiam ac leo a dui consectetur dictum ut in lacus.</div>
  </li>
  <li>
    <div class="number"></div>
    <div class="content">Phasellus vel convallis magna. Nam ex quam, lacinia ac facilisis et, tempor vitae elit. Duis sit amet urna scelerisque, molestie ipsum sed, ultricies orci. Duis ac purus congue, maximus enim ut, rutrum quam. Quisque porta bibendum ex, eget laoreet
      neque eleifend eu. Etiam ac leo a dui consectetur dictum ut in lacus.</div>
  </li>
  <li>
    <div class="number"></div>
    <div class="content">Phasellus vel convallis magna. Nam ex quam, lacinia ac facilisis et, tempor vitae elit. Duis sit amet urna scelerisque, molestie ipsum sed, ultricies orci. Duis ac purus congue, maximus enim ut, rutrum quam. Quisque porta bibendum ex, eget laoreet
      neque eleifend eu. Etiam ac leo a dui consectetur dictum ut in lacus.</div>
  </li>
  <li>
    <div class="number"></div>
    <div class="content">Phasellus vel convallis magna. Nam ex quam, lacinia ac facilisis et, tempor vitae elit. Duis sit amet urna scelerisque, molestie ipsum sed, ultricies orci. Duis ac purus congue, maximus enim ut, rutrum quam. Quisque porta bibendum ex, eget laoreet
      neque eleifend eu. Etiam ac leo a dui consectetur dictum ut in lacus.</div>
  </li>
</ol>
＆＃13;
＆＃13;
＆＃13;

https://codepen.io/BraveVN1804/pen/NvxYyJ

但是当罗马数字增加时，段落在同一垂直线上没有对齐。我可以使用table重构代码来修复它，但在我的情况下，这不是一个好主意，所以我想用list来完成。

2 个答案:

答案 0 :(得分：1)

https://jsfiddle.net/prowseed/f5a3p8qd/

基本上你所要做的就是删除自然计数器，而是在counter()伪元素中使用css :before功能，这些功能绝对位于相对li父级内。

<ol>
    <li>...</li>
    ...
</ol>



ol {
  list-style:none;
  counter-reset: mycounter;
}

ol li {
  position:relative;
  padding:10px 0 10px 80px;
}

ol li:before {
  content: counter(mycounter, upper-roman);
    counter-increment: mycounter;
  position:absolute;
  top:0;
  left:0;
}

答案 1 :(得分：0)

将固定宽度设置为.number。演示：

ol {
  text-align: justify;
}

ol.first {
  list-style: upper-roman;
  list-style-position: inside;
}

ol.second {
  list-style: upper-latin;
  list-style-position: inside;
}

ol.third {
  list-style: lower-roman;
  list-style-position: inside;
}

ol li {
  display: inline-flex;
  margin-bottom: 5px;
  white-space: normal;
}

ol li .number {
  width: 50px; /* new */
  display: list-item;
}

ol li .content {
  margin-left: 15px;
}
<ol class="first">
  <li>
    <div class="number"></div>
    <div class="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur ipsum nisi, hendrerit vel tristique vel, ornare eget ligula. Quisque ipsum eros, rhoncus nec luctus et, interdum quis est. Quisque semper id magna sed iaculis. Vestibulum ornare aliquam
      neque nec consectetur. Curabitur molestie venenatis urna sed congue. Interdum et malesuada fames ac ante ipsum primis in faucibus.</div>
  </li>
  <li>
    <div class="number"></div>
    <div class="content">Phasellus vel convallis magna. Nam ex quam, lacinia ac facilisis et, tempor vitae elit. Duis sit amet urna scelerisque, molestie ipsum sed, ultricies orci. Duis ac purus congue, maximus enim ut, rutrum quam. Quisque porta bibendum ex, eget laoreet
      neque eleifend eu. Etiam ac leo a dui consectetur dictum ut in lacus.</div>
  </li>
  <li>
    <ol class="second">
      <li>
        <div class="number"></div>
        <div class="content">Labore exercitation fugiat mollit nostrud. Dolore quis id aliquip eu reprehenderit proident. Cupidatat ullamco esse non nisi minim et veniam sunt labore proident esse ea ex. Officia sint deserunt cupidatat amet irure esse fugiat laborum. Aliqua
          deserunt aute cillum enim officia irure ut officia proident ea. Quis sunt enim esse reprehenderit aute est.</div>
      </li>
      <li>
        <div class="number"></div>
        <div class="content">Labore exercitation fugiat mollit nostrud. Dolore quis id aliquip eu reprehenderit proident. Cupidatat ullamco esse non nisi minim et veniam sunt labore proident esse ea ex. Officia sint deserunt cupidatat amet irure esse fugiat laborum. Aliqua
          deserunt aute cillum enim officia irure ut officia proident ea. Quis sunt enim esse reprehenderit aute est.</div>
      </li>
      <li>
        <div class="number"></div>
        <div class="content">Labore exercitation fugiat mollit nostrud. Dolore quis id aliquip eu reprehenderit proident. Cupidatat ullamco esse non nisi minim et veniam sunt labore proident esse ea ex. Officia sint deserunt cupidatat amet irure esse fugiat laborum. Aliqua
          deserunt aute cillum enim officia irure ut officia proident ea. Quis sunt enim esse reprehenderit aute est.</div>
      </li>
    </ol>
  </li>
  <li>
    <div class="number"></div>
    <div class="content">Phasellus vel convallis magna. Nam ex quam, lacinia ac facilisis et, tempor vitae elit. Duis sit amet urna scelerisque, molestie ipsum sed, ultricies orci. Duis ac purus congue, maximus enim ut, rutrum quam. Quisque porta bibendum ex, eget laoreet
      neque eleifend eu. Etiam ac leo a dui consectetur dictum ut in lacus.</div>
  </li>
  <li>
    <div class="number"></div>
    <div class="content">Phasellus vel convallis magna. Nam ex quam, lacinia ac facilisis et, tempor vitae elit. Duis sit amet urna scelerisque, molestie ipsum sed, ultricies orci. Duis ac purus congue, maximus enim ut, rutrum quam. Quisque porta bibendum ex, eget laoreet
      neque eleifend eu. Etiam ac leo a dui consectetur dictum ut in lacus.</div>
  </li>
  <li>
    <div class="number"></div>
    <div class="content">Phasellus vel convallis magna. Nam ex quam, lacinia ac facilisis et, tempor vitae elit. Duis sit amet urna scelerisque, molestie ipsum sed, ultricies orci. Duis ac purus congue, maximus enim ut, rutrum quam. Quisque porta bibendum ex, eget laoreet
      neque eleifend eu. Etiam ac leo a dui consectetur dictum ut in lacus.</div>
  </li>
  <li>
    <div class="number"></div>
    <div class="content">Phasellus vel convallis magna. Nam ex quam, lacinia ac facilisis et, tempor vitae elit. Duis sit amet urna scelerisque, molestie ipsum sed, ultricies orci. Duis ac purus congue, maximus enim ut, rutrum quam. Quisque porta bibendum ex, eget laoreet
      neque eleifend eu. Etiam ac leo a dui consectetur dictum ut in lacus.</div>
  </li>
  <li>
    <div class="number"></div>
    <div class="content">Phasellus vel convallis magna. Nam ex quam, lacinia ac facilisis et, tempor vitae elit. Duis sit amet urna scelerisque, molestie ipsum sed, ultricies orci. Duis ac purus congue, maximus enim ut, rutrum quam. Quisque porta bibendum ex, eget laoreet
      neque eleifend eu. Etiam ac leo a dui consectetur dictum ut in lacus.</div>
  </li>
</ol>

相关问题
最新问题