0

如何水平显示四 (4) 个无序列表？

列表.html

<!DOCTYPE html>

<html lang='en'>
<head>
    <meta charset="UTF-8" /> 
    <title>
        HTML Lists
    </title>
    <link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>

<h1>
    HTML Lists
</h1>

<div id="container">
    <ul id="k">
        <li>katakana</li>
        <li>katakana</li>
        <li>katakana</li>
        <li>katakana</li>
        <li>katakana</li>   
    </ul>

    <ul id="ki">
        <li>katakana-iroha</li>
        <li>katakana-iroha</li>
        <li>katakana-iroha</li>
        <li>katakana-iroha</li>
        <li>katakana-iroha</li> 
    </ul>

    <ul id="h">
        <li>hiragana</li>
        <li>hiragana</li>
        <li>hiragana</li>
        <li>hiragana</li>
        <li>hiragana</li>   
    </ul>

    <ul id="hi>
        <li>hiragana-iroha</li>
        <li>hiragana-iroha</li>
        <li>hiragana-iroha</li>
        <li>hiragana-iroha</li>
        <li>hiragana-iroha</li> 
    </ul>

    <ul id="i">
        <li>Image</li>
        <li>Image</li>
        <li>Image</li>
        <li>Image</li>
        <li>Image</li>  
    </ul>
</div>

</body>
</html>

样式.css

#container  {
    display: inline;
}

ul {
    list-style-position: inside;    
}

#k  {
    list-style-type: katakana;  
}

#ki{
    list-style-type: katakana-iroha;

}

#h {
    list-style-type: hiragana;
}

#hi {
    list-style-type: hiragana-iroha;
}

#i {
    list-style-image: url(images/myimage.png);
}
4

2 回答 2

2 
ul {
    list-style-position: inside;    
    display:inline-block;
    vertical-align:top;
}

并且display:block在#i

#i {
    list-style-image: url(images/myimage.png);
    display:block;
}

小提琴- http://jsfiddle.net/nNRDa/ http://jsfiddle.net/nNRDa/1/

注意：IE7 只支持display:inline-block自然内联的元素。

于 2013-04-05T09:19:57.797 回答
1

如果已将 with 提供给 ul 和容器，则以下内容将起作用

#container  {
display: block;
width:100%;       
overflow:hidden;        
}

ul {
width:15%;
float:left;
margin:20px 3% 0 0;
display:block;
vertical-align:top;
}

宽度也可以以 px 为单位。

于 2013-04-05T09:41:44.823 回答