Question

我有一个链接列表。每个链接都有不同的部分。我不知道每个部分的宽度，因为它会在运行时改变，但我希望每个匹配部分的宽度相同。结果类似于如果我使用一个表，其中每列具有相同的宽度，但我不能使用表，因为我希望每个“行”是一个连续的a元素。

这就是我所拥有的。

* { text-decoration: none }

<ul>
  <li><a href="#"><span class="part1">asdf</span> - <span class="part2">defdef</span> - <span class="part3">ghij</span></a></li>
  <li><a href="#"><span class="part1">adf</span> - <span class="part2">de</span> - <span class="part3">ghij</span></a></li>
  <li><a href="#"><span class="part1">asdfasdf</span> - <span class="part2">d</span> - <span class="part3">ghij</span></a></li>
  <li><a href="#"><span class="part1">asdfa</span> - <span class="part2">defd</span> - <span class="part3">ghij</span></a></li>
  <li><a href="#"><span class="part1">a</span> - <span class="part2">defde</span> - <span class="part3">ghij</span></a></li>
</ul>

这就是我想要输出的样子，除了我无法设置特定的宽度，因为在运行时我不知道每个部分有多少文本。

* { text-decoration: none }
.part1 { display: inline-block; width: 55px }
.part2 { display: inline-block; width: 45px }
.part3 { display: inline-block; width: 35px }

<ul>
  <li><a href="#"><span class="part1">asdf</span> - <span class="part2">defdef</span> - <span class="part3">ghij</span></a></li>
  <li><a href="#"><span class="part1">adf</span> - <span class="part2">de</span> - <span class="part3">ghij</span></a></li>
  <li><a href="#"><span class="part1">asdfasdf</span> - <span class="part2">d</span> - <span class="part3">ghij</span></a></li>
  <li><a href="#"><span class="part1">asdfa</span> - <span class="part2">defd</span> - <span class="part3">ghij</span></a></li>
  <li><a href="#"><span class="part1">a</span> - <span class="part2">defde</span> - <span class="part3">ghij</span></a></li>
</ul>

Answer 1

要实现这一点，您必须以垂直列而不是水平方式订购信息 - 这样，最长项目的宽度决定整个列的宽度

＆＃13;

ul {
  float:left;
  padding:0;
}
li {
  list-style:none;
}
a {
  text-decoration:none;
}
span {
  padding:10px;
}

＆＃13;

<ul>
  <li><a href="#"><span class="part1">asdf</span> </a></li>
  <li><a href="#"><span class="part1">adf</span> </a></li>
  <li><a href="#"><span class="part1">asdfasdf</span> </a></li>
</ul>
<ul>
  <li><a href="#"><span class="part2">defdef</span> </a></li>
  <li><a href="#"><span class="part2">de</span> </a></li>
  <li><a href="#"><span class="part2">d</span> </a></li>
</ul>
<ul>
  <li><a href="#"><span class="part3">ghij</span> </a></li>
  <li><a href="#"><span class="part3">ghij</span> </a></li>
  <li><a href="#"><span class="part3">ghij</span> </a></li>
</ul>

＆＃13;

匹配列表行中类似元素的宽度

1 个答案: