Question

我在业余时间制作了一个测试网站，我正在尝试制作菜单栏。在我制作它的时候，我将有4种选择。所以我使用25％的宽度来正确划分页面。我在谷歌Chrome上测试了它，我意识到当我使用25％的4个选项时，它给了我3个可以从页面中移除第四个并留下一个大空间。我不知道自己做错了什么，我想要一些帮助。

这是我的HTML代码：

<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<link rel="stylesheet" type="text/css" href="test.css">
</head>
<body>
<div id="header"><span id="title">Test</span><span     
id="com">.com</span></div>
<div id="linkheader"><ul id="menuul">
<li id="menuil1"><a href="">Test</a></li>
<li id="menuil2"><a href="">Test</a></li>
<li id="menuil3"><a href="">Test</a></li>
<li id="menuil4"><a href="">Test</a></li>
</ul>
</div>
</div>
</body>
</html>

这是我的CSS代码：

body {
margin: 0;
}

#header {
background-color: #ffffff;
height: 68px;
padding-top: 20px;
line-height: 50px;
overflow: hidden;
overflow-x: hidden;
overflow-y: hidden;
font-family: Arial;
text-align: center;
font-weight: bold;
background-color: #080808;
font-size: 1.25em;
color: #FFFFFF;
}

#title {
color: #E00000;
font-size: 2.1875em;
}
#com {
color: #FFFFFF;
font-size: 2.1875em;
}


#menuul {
list-style-type: none;
margin: 0;
padding: 4px;
display: inline;
}

#menuil1 {
display:inline;
float: left;
width: 25%;
}
#menuil2 {
display:inline;
float: left;
width: 25%;
}
#menuil3 {
display:inline;
float: left;
width: 25%;
}
#menuil4 {
display:inline;
float: left;
width: 25%;
}

a {
display: inline;
width: 60px;
color: #FFFFFF;
text-decoration: none;
font-size: 1.5em;
}

a:visited { 
text-decoration: none; 
color: #FFFFFF;
font-size: 1.5em;
}

#linkheader {
height: 1.75em;
line-height: 50px;
overflow: hidden;
overflow-x: hidden;
overflow-y: hidden;
font-family: Arial;
text-align: center;
font-weight: bold;
background-color: #080808;
font-size: 1.25em;
color: #FFFFFF;
padding-bottom: 20px;
}

对于宽度，如果我在其中一个上做24％，它会将它们全部放到页面上，但如果我做了25％，那么它似乎不想全部适合页面。

Answer 1

将display: block添加到您的ul。

#menuul {
  list-style-type: none;
  margin: 0;
  padding: 4px;
  display: block;
}

body {
margin: 0;
}

#header {
background-color: #ffffff;
height: 68px;
padding-top: 20px;
line-height: 50px;
overflow: hidden;
overflow-x: hidden;
overflow-y: hidden;
font-family: Arial;
text-align: center;
font-weight: bold;
background-color: #080808;
font-size: 1.25em;
color: #FFFFFF;
}

#title {
color: #E00000;
font-size: 2.1875em;
}
#com {
color: #FFFFFF;
font-size: 2.1875em;
}


#menuul {
list-style-type: none;
margin: 0;
padding: 4px;
display: block;
}

#menuil1 {
display:inline;
float: left;
width: 25%;
}
#menuil2 {
display:inline;
float: left;
width: 25%;
}
#menuil3 {
display:inline;
float: left;
width: 25%;
}
#menuil4 {
display:inline;
float: left;
width: 25%;
}

a {
display: inline;
width: 60px;
color: #FFFFFF;
text-decoration: none;
font-size: 1.5em;
}

a:visited { 
text-decoration: none; 
color: #FFFFFF;
font-size: 1.5em;
}

#linkheader {
height: 1.75em;
line-height: 50px;
overflow: hidden;
overflow-x: hidden;
overflow-y: hidden;
font-family: Arial;
text-align: center;
font-weight: bold;
background-color: #080808;
font-size: 1.25em;
color: #FFFFFF;
padding-bottom: 20px;
}

<div id="header"><span id="title">Test</span><span     
id="com">.com</span></div>
<div id="linkheader"><ul id="menuul">
<li id="menuil1"><a href="">Test</a></li>
<li id="menuil2"><a href="">Test</a></li>
<li id="menuil3"><a href="">Test</a></li>
<li id="menuil4"><a href="">Test</a></li>
</ul>
</div>
</div>

使用25％宽度是从页面中删除元素

1 个答案: