Question

如何水平显示四（4）个无序列表？

lists.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>

的style.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);
}

Answer 1

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

{p}和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自然内联的元素。

Answer 2

如果已经给了ul和容器

，则以下内容将起作用

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

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

宽度也可以用px。

表示

水平显示四个列表

2 个答案: