Question

我希望并排有大约7个列表（UL），每个列表都有一个单独的样式标题标题。我试图让列表在标题标题和子弹下面很好地排序（正在考虑使用文本缩进，但显然在IE8中不起作用！??）。我提出了下面的代码（我是一个新手），但HTML验证器再次向我发送错误消息。我知道我不能把我的样式标题标题放在UL下，但这是唯一的方法，可以在一个干净的直列中很好地排序。我做错了什么？

<ul style="width:14%; float:left;">
<span style="font-size: 13px;"><p class="notice">title 1</p></span>
<li><a class="underline2" href="etc etc"><span 
style="font-size: 10pt; line-height: 14px; color: #616161;">aaaaa</span></a></li>
<li><a class="underline2" href="etc etc"><span 
style="font-size: 10pt; line-height: 14px; color: #616161;">bbbbb</span></a></li>
<li><a class="underline2" href="etc etc"><span 
style="font-size: 10pt; line-height: 14px; color: #616161;">ddddd</span></a></li>
</ul>

<ul style="width:14%; float:left;">
<span style="font-size: 13px;"><p class="notice">title2</p></span>
<li><a class="underline2" href="etc etc"><span 
style="font-size: 10pt; line-height: 14px; color: #616161;">eeeeee</span></a></li>
<li><a class="underline2" href="etc etc"><span 
style="font-size: 10pt; line-height: 14px; color: #616161;">ffffff</span></a></li>
<li><a class="underline2" href="etc etc"><span 
style="font-size: 10pt; line-height: 14px; color: #616161;">hhhhhhh</span></a></li>
</ul>

<ul style="width:14%; float:left;">
<span style="font-size: 13px;"><p class="notice">title3</p></span>
<li><a class="underline2" href="etc etc"><span 
style="font-size: 10pt; line-height: 14px; color: #616161;">iiiiii</span></a></li>
<li><a class="underline2" href="etc etc"><span 
style="font-size: 10pt; line-height: 14px; color: #616161;">kkkkkk</span></a></li>
<li><a class="underline2" href="etc etc"><span 
style="font-size: 10pt; line-height: 14px; color: #616161;">llllllll</span></a></li>
</ul>

Answer 1

您的HTML无效，并且您使用的是内联样式。

我在列表和标题中包含了一个包装div和一个类。

这里有一个工作示例：

http://jsfiddle.net/Pf8eR/

HTML

<div class="column">
    <h2>First Column</h2>
    <ul>
        <li>First item</li>
        <li>Second item</li>
        <li>Third item</li>
    </ul>
</div>

<div class="column">
    <h2>Second Column</h2>
    <ul>
        <li>First item</li>
        <li>Second item</li>
        <li>Third item</li>
    </ul>
</div>

<div class="column">
    <h2>Third Column</h2>
    <ul>
        <li>First item</li>
        <li>Second item</li>
        <li>Third item</li>
    </ul>
</div>

和css

ul, li{
margin:0;
padding:0 0 0 15px;    
}

.column{
    float: left;
    margin: 0 20px 0 0;
}

Answer 2

验证程序错误消息的原因是ul元素只能有li个元素作为子元素，而span元素不能包含p元素。（关于HTML的任何体面的教程都会描述这些事情。）

另一方面，您的列表标题是逻辑标题而不是段落。它取决于上下文的标题级别，但假设此结构出现在层次结构的顶层，h2是正确的。类似下面的内容（忽略li元素的内部结构，这里不相关）：

<div class=list>
<h2>Title 1</h2>
<ul>
<li>Item one
<li>Item two
<li>Item three
</ul>
</div>

额外的div元素允许您将列表及其标题设置为一个单元。你似乎想要像这样的样式表可以实现的结果：

.list { width: 14%; float: left; }
.list h2 { font-size: 13px; font-weight: normal }
.list li { font-size: 10pt; line-height: 14px }
.list ul, .list ul li { margin: 0; padding: 0; }
.list ul, .list h2 { margin-left: 1.3em; }

将其放在您链接到的外部样式表中，或放在style元素中。对于不同的元素一遍又一遍地重复相同的设置会使代码难以阅读并且难以维护。

上面的字体大小符合您的代码。最好不要为列表项设置字体大小，并将标题的字体大小设置为适当大于复制文本大小的字体大小，例如， font-size: 115%。

Answer 3

您可以尝试将此css应用于ul标记。

ul{
display:inline-block;
vertical-align:top;
}

多个列表并排放置，并带有样式标题标题

3 个答案: