时间戳

首页 > 解决方案 > 无论如何使用 justify: space-between on li 没有嵌套的 div？

html - 无论如何使用 justify: space-between on li 没有嵌套的 div？

问题描述

有什么方法可以删除这些包含内容的嵌套 div，这有关系吗？还有比 div 更好的标签吗？我对 HTML 很陌生，所以我不确定这有多重要。我听说过一些关于语义 HTML 的重要性，但我在许多网站上看到了很多 div。

@media screen and(max-width: 400px) {
  li {
    flex-wrap: wrap;
    justify-content: center;
  }
}

ul {
  display: flex;
  width: 90%;
  flex-wrap: wrap;
}

li {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  flex: 40%;
  padding: 30px 80px 30px 80px;
  width: 200px;
}

li>div {
  padding: 10px;
  white-space: nowrap;
  font-size: 14px;
}
<section>
  <ul aria-label="Pork">
    <li>
      <div>rib-eye</div>
      <div>$13.56/lb</div>
    </li>
    <li>
      <div>rib-eye</div>
      <div>$13.56/lb</div>
    </li>
    <li>
      <div>rib-eye</div>
      <div>$13.56/lb</div>
    </li>
    <li>
      <div>rib-eye</div>
      <div>$13.56/lb</div>
    </li>
    <li>
      <div>rib-eye</div>
      <div>$13.56/lb</div>
    </li>
    <li>
      <div>rib-eye</div>
      <div>$13.56/lb</div>
    </li>
  </ul>
  <ul aria-label="Beef">
    <li>
      <div>rib-eye</div>
      <div>$13.56/lb</div>
    </li>
    <li>
      <div>rib-eye</div>
      <div>$13.56/lb</div>
    </li>
    <li>
      <div>rib-eye</div>
      <div>$13.56/lb</div>
    </li>
    <li>
      <div>rib-eye</div>
      <div>$13.56/lb</div>
    </li>
    <li>
      <div>rib-eye</div>
      <div>$13.56/lb</div>
    </li>
    <li>
      <div>rib-eye</div>
      <div>$13.56/lb</div>
    </li>
  </ul>
</section>

标签： htmlcssflexbox

解决方案

我会说像你所做的那样使用它们没有任何问题，尽管在语义上可能会更好地使用 a<p>或 a <span>，因为它们更适合这种类型的内容。<div>主要用于分隔内容块，而这是更多间距文本。

但是，没有 100% 正确或 100% 错误。

推荐阅读