导航栏的宽度问题

Question

我是网页设计的新手，所以我开始了一个非常简单的项目。我试图制作一个带有 4 个均匀分布的按钮的导航栏。但是，当我将宽度设置为 li 的 25% 时，栏的最后一个元素不适合页面，而是位于其他元素下方。我想让它们均匀分布。

<!DOCTYPE html PUBLIC>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
     <link rel="stylesheet" href="./css/style.css">
    <title>Untitled Document</title>
</head>

<!-- Nav Bar -->
<div id="#nav">
    <ul>
        <li><a class="red" href="#nav">Home</a>
        <li><a class="orange" href="#OverOns">Over ons</a>
        <li><a class="yellow" href="#Nieuws">Nieuws</a>
        <li><a class="green" href="#Contact">Contact</a>
    </ul>
</div>
<!-- End Nav Bar -->

<!-- Slider -->
<div class="slider">
</div>
<!-- End Slider -->

<body>
</body>
</html>


@charset "utf-8";
/* CSS Document */

/* Fix padding and marg options in different browsers */
* {
    margin:0;
    padding:0;  
}

.red {
    background-color:#F00;
}

.orange {
    background-color:#F90;
}

.yellow {
    background-color:#FF0;
}

.green {
    background-color:#0F0;
}

.slider {

}

ul {
    position:fixed;
    top:0px;
    margin:0;
    width:100%;
    list-style-type:none;
    border:0;
    padding:0;
    overflow:hidden;
    background-color:#FF;
}

li {
    float: left;
    width:25%;
    border-right:1px solid #000;
}

li:last-child {
    border-right:none;  
}

li a {
    display: block;
    padding: 18%;
    color:#FFF;
    text-align:center;
    text-decoration:none;
}

li a:hover {
    opacity:0.5;    
}

Answer 1

通常当元素之间有某种 padding/margin/border 时会发生这种情况。解决此问题的最简单方法是将宽度从 25% 减少。确保组合宽度低于 100%。现在这就是你的元素在下面的原因。

您要实现的目标是使元素之间绝对没有 space。总共使用大约 96% 的东西。即每里 24%。

备用解决方案：

设置这个属性 --> box-sizing: border-box; 然后将宽度设置为 25%。那应该解决它。您实际上要做的是使元素的宽度 + 填充 + 边框 + 边距 = 25%

通过使用宽度 class 并避免使用内置样式来做到这一点。

欢迎使用网络编程

Answer 2

这通常是因为当元素显示为inline-block时，元素之间的space被呈现为文本。要解决此问题，请将父项上的 font-size 设置为 0，然后重置子项上的 font-size。大多数浏览器的默认 font-size 是 16px.

此外，边框通常会增加元素的宽度，而不是包含在其中。这些元素上有一个 1px 宽边框，因此它的宽度为 25% + 2px（两边各一个）。使用 box-sizing: border-box 将边框宽度包含在元素的大小调整中。

这是一个简单的例子。

dl {
    font-size: 0;
}
dd {
    font-size: 16px;
    display: inline-block;
    margin: 0;
    width: 25%;
    text-align: center;
}
a {
    display: inline-block;
    padding: 7.5px 20px;
    border: 1px solid #f9fd42;
    border-radius: 5px;
    color: #000;
    text-decoration: none;
}

<dl>
  <dd><a href="#">Item</a></dd>
  <dd><a href="#">Item</a></dd>
  <dd><a href="#">Item</a></dd>
  <dd><a href="#">Item</a></dd>
</dl>

Answer 3

你在li中有一个1px的边框，所以这个边框取其他元素的space，也就是说li的大小是边框的25%加上1px。

验证您的 CSS。这是你的代码。

li {
    float: left;
    width:25%;
    border-right:1px solid #000;
}

试试这个。

li {
    float: left;
    width:25%;
    border-right:0;
}

Answer 4

那是因为你有一个 border-right，这意味着每个 li 块的总宽度为 25%+1px，最后一个放不下。

由于您可能想保留该边框并让四个按钮覆盖所有 space，您可以这样做：

li {
    float: left;
    width: calc(25% - 1px);
    border-right:1px solid #000;
}

这样你就可以删除导致问题的 1px。不幸的是，某些较旧的浏览器不支持 calc()：calc() caniuse.com

希望对您有所帮助 ;D

导航栏的宽度问题

Width problems with navbar

html

css

width

navbar