html - 如何将列表项置于无序列表的中心？-6ren

html - 如何将列表项置于无序列表的中心？

转载作者：太空宇宙更新时间：2023-11-04 14:33:52

我有这个:

HTML:

   <body> 
    <header>
        <div class="cont">
            <ul>
                <li>HOME</li>
                <li>BUY</li>
                <LI>CONTACT</LI>
                <LI>MORE</LI>
                <div class="clear">
            </ul>
        </div>
    </header> 
   </body>

CSS:

*{
    margin: 0;
    padding: 0;
}

header{
    width: 100%;
    height: auto;
    background: lightgrey;
}

.cont{
    width: 60%;
    margin:0 auto;
}

.cont ul{
list-style: none;
background: red;
}

.cont ul li{
    list-style: none;
    float: left;
    padding:1em;
    background: green;
}

.clear{
    clear: both;
}

https://jsfiddle.net/zggjx7uu/

我想知道如何让绿色方 block 进入红色方 block 中间容器。我知道这可能是新手，但我一直遇到问题。

最佳答案

这可能是你想要的:

示例:https://jsfiddle.net/zggjx7uu/3/

HTML:

<body>
<header>
    <div class="cont">
        <ul>
            <li>HOME</li><li>BUY</li><li>CONTACT</li><li>MORE</li>
            <div class="clear">
        </ul>
    </div>
</header>
</body>

注意 li 必须写在同一行，因为 inline-block 元素保留了它们的空白，要消除空白，您要么必须编写 li 在同一行或使用负 margin。

CSS:

*{
    margin: 0;
    padding: 0;
}

header{
    width: 100%;
    height: auto;
    background: lightgrey;
}

.cont{
    width: 60%;
    margin:0 auto;
}

.cont ul{
    list-style: none;
    background: red;
    text-align: center;
}

.cont ul li{
    list-style: none;
    display: inline-block;
    padding:1em;
    background: green;
}

.clear{
    clear: both;
}