0

I'm new to HTML, CSS and JavaScript, so this may be a very basic problem, however, I haven't been able to find a solution by searching. Most solutions I've found deal with automatically numbered lists, or un-ordered lists.

I'm using Javascript to populate a list on a webpage from a JSON document. The output HTML list looks like this:

<article>
    <div>
        <ul class='foo'><li class='num'>1.</li><li class='txt'>bar</li></ul>
        <ul class='foo'><li class='num'>2.</li><li class='txt'>foo</li></ul>
        <ul class='foo'><li class='num'>2a.</li><li class='txt'>very long test here so that it moves to a new line on the webpage</li></ul>
        <ul class='foo'><li class='num'>5.</li><li class='txt'>bar</li></ul>
        <ul class='foo'><li class='num'>6.</li><li class='txt'>foo</li></ul>
    </div>
</article>

I then use CSS to style these to look like a single list:

.foo li{
    display: inline;
    padding-left: 20px;
}

This shows the generated numbers with the text to the right, however, if the text is long, like in the third ul in the example above, it loses all indentation when it moves down to a new line. Also, if one number is longer than another, the text to the right of it is indented by the same amount extra, but I'd like to have each line of text start in line with the text above and below it.

I've tried floating each list left and right, but that wrecked the formatting I had on the page. I'm sure there's some simple way to overcome this, but any search I've made has been related to automatically generated numbers for ol objects.

How do I keep my own list numbering, but control the consistency of indentation over multiple lines?

4

3 回答 3

1

防止这种情况的最简单方法是简单地给出列表元素display: table-cell：

.foo li {
  display: table-cell;
  padding-left: 20px;
}
<article>
  <div>
    <ul class='foo'>
      <li class='num'>1.</li>
      <li class='txt'>bar</li>
    </ul>
    <ul class='foo'>
      <li class='num'>2.</li>
      <li class='txt'>foo</li>
    </ul>
    <ul class='foo'>
      <li class='num'>2a.</li>
      <li class='txt'>very long test here so that it moves to a new line on the webpage</li>
    </ul>
    <ul class='foo'>
      <li class='num'>5.</li>
      <li class='txt'>bar</li>
    </ul>
    <ul class='foo'>
      <li class='num'>6.</li>
      <li class='txt'>foo</li>
    </ul>
  </div>
</article>

或者，您可以display: flex在父元素和display: inline-flex列表元素上使用：

.foo {
  display: flex;
}

.foo li {
  display: inline-flex;
  padding-left: 20px;
}
<article>
  <div>
    <ul class='foo'>
      <li class='num'>1.</li>
      <li class='txt'>bar</li>
    </ul>
    <ul class='foo'>
      <li class='num'>2.</li>
      <li class='txt'>foo</li>
    </ul>
    <ul class='foo'>
      <li class='num'>2a.</li>
      <li class='txt'>very long test here so that it moves to a new line on the webpage</li>
    </ul>
    <ul class='foo'>
      <li class='num'>5.</li>
      <li class='txt'>bar</li>
    </ul>
    <ul class='foo'>
      <li class='num'>6.</li>
      <li class='txt'>foo</li>
    </ul>
  </div>
</article>

如果你想让文本“完全”对齐，你需要给margin-left: -8px在编号中有附加字母的元素：

.foo {
  display: flex;
}

.foo li {
  display: inline-flex;
  padding-left: 20px;
}

.foo .long {
  margin-left: -8px;
}
<article>
  <div>
    <ul class='foo'>
      <li class='num'>1.</li>
      <li class='txt'>bar</li>
    </ul>
    <ul class='foo'>
      <li class='num'>2.</li>
      <li class='txt'>foo</li>
    </ul>
    <ul class='foo'>
      <li class='num'>2a.</li>
      <li class='txt long'>very long test here so that it moves to a new line on the webpage</li>
    </ul>
    <ul class='foo'>
      <li class='num'>5.</li>
      <li class='txt'>bar</li>
    </ul>
    <ul class='foo'>
      <li class='num'>6.</li>
      <li class='txt'>foo</li>
    </ul>
  </div>
</article>

说了这么多，处理这个问题的“最好”方法是只使用一个<ul>并使用list-style-type: decimal. 这样，缩进就会对齐，并且会自动为您处理编号：

.foo li {
  list-style-type: decimal;
  padding-left: 20px;
}
<article>
  <div>
    <ul class='foo'>
      <li>bar</li>
      <li>foo</li>
      <li>very long test here so that it moves to a new line on the webpage</li>
      <li>bar</li>
      <li>foo</li>
    </ul>
  </div>
</article>

这甚至可以扩展到具有覆盖罗马字母的子列表，用负数偏移margin-left：

.foo li {
  list-style-type: decimal;
  padding-left: 20px;
}

.foo li ul li {
  list-style-type: lower-alpha;
  margin-left: -40px;
}
<article>
  <div>
    <ul class='foo'>
      <li>bar</li>
      <li>foo</li>
      <li>foo
        <ul>
          <li>very long test here so that it moves to a new line on the webpage</li>
        </ul>
      </li>
      <li>bar</li>
      <li>foo</li>
    </ul>
  </div>
</article>

于 2018-10-22T23:29:46.060 回答
0

您可以将列表呈现为表格：

ul.foo {
     display: table;
}
ul.foo > li {
    display: table-cell;
}
ul.foo > li.num {
    min-width: 40px;
}

演示：http: //jsfiddle.net/xbsp30kd/1/

于 2018-10-22T23:31:43.230 回答
-1

ul 标签应该只使用一次它应该是这样的

    <ul>
    <li>Items</li>
    <li>Items</li>
    <li>Items</li>
    </ul>

你不断重复你的 ul 标签和自定义索引，你可以使用 span 标签而不是使用另一个 li 标签

于 2018-10-22T23:35:29.053 回答