0

I want to have about 7 lists (UL) side-by-side and each list has a separate styled header title. I am trying to get the lists to sort nicely underneath the header title and the bullets also (was thinking using text-indent, but that doesnt work in IE8 apparently!??). I came up with below code (I am a newbie), but again HTML validator is throwing error messages at me. I know I cannot put my styled header title under the UL but thats the only way to get it nicely sorted in one clean straight column. What I am doing wrong?

<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>
4

3 回答 3

5

您的 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;
}
于 2013-06-14T14:23:28.183 回答
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%.

于 2013-06-14T14:28:05.123 回答
0

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

ul{
display:inline-block;
vertical-align:top;
}
于 2013-06-14T14:31:55.577 回答