Question

我有这个：

的 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/

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

Answer 1

这可能是你想要的：

示例：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;
}

Answer 2

对您的子元素使用display:inline-block，并为您的父元素应用text-align:center。

接下来要删除空格，请为您的父元素应用font-size:0，然后为您的子元素应用所需的大小。

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

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

DEMO

Answer 3

在您的ul上使用text-align: center;，在li上使用display: inline-block。

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

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

<强>小提琴： https://jsfiddle.net/skeurentjes/zggjx7uu/2/

Answer 4

使用display: inline-block;代替float: left

parent- text-align: center;

＆＃13;

*{
	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;
}

＆＃13;

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

＆＃13;

Answer 5

使用此

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

.cont ul{
    list-style: none;
    margin:0 auto;
    background: green;
}

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

5 个答案: