Question

我正在将ul标签与css结合使用，并且我只从ul标签中获得了我想要的视觉效果。

所以我打算不使用li标签。但我不确定这是否适合HTML编码标准，因为我读过ul和li标签总是假设一起使用。

感谢您的帮助！

<div class="featured_list">
           <ul>
              <a id="f1Link" href="" class="">
                 <div class="image_container"> <img id="f1Pic" src="" alt=""> </div>
                 <div class="info">
                    <h2 id="f1Title"></h2>
                    <h4 id="f1Stock" class=""></h4>
                 </div>
              </a>
              <a id="f2Link" href="" class="">
                 <div class="image_container"> <img id="f2Pic" src="" alt=""> </div>
                 <div class="info">
                    <h2 id="f2Title"></h2>
                    <h4 id="f2Stock" class=""></h4>
                 </div>
              </a>
              <a id="f3Link" href="" class="">
                 <div class="image_container"> <img id="f3Pic" src="" alt=""> </div>
                 <div class="info">
                    <h2 id="f3Title"></h2>
                    <h4 id="f3Stock" class=""></h4>
                 </div>
              </a>
              </ul>
           </div>

Answer 1

要直接回答您的问题，是的，您需要li使用ul。 W3C HTML Validator在您的代码中显示此错误：＆＃34;元素a在此上下文中不允许作为元素ul的子元素。＆＃34; （为简洁起见，我还删除了其他错误。）

如果您的内容不是列表，则不应使用ul。如果是列表，则需要在其中加上li，以使其在语义上正确。

您可能希望在ul内部使用li，但使用内联样式。这是一个例子：

＆＃13;

/* Inline list items */
.list-inline {
  padding-left: 0;
  margin-left: -5px;
}
.list-inline > li {
  display: inline-block;
  padding: 0 5px;
}

＆＃13;

<ul class="list-inline">
  <li>One</li>
  <li>Two</li>
  <li>Three</li>
</ul>

＆＃13;

注意：借用Bootstrap type.less的样式。

Answer 2

根据规范，零个或多个li元素是ul元素唯一允许的内容。

来源： http://www.w3.org/TR/html-markup/ul.html

如果您有一个列表，请使用li元素并设置样式。如果你想要的ul是边距和填充，而你的数据不是列表，你最好使用样式div。

您是否必须使用带有ul的li？ HTML标准

2 个答案: