Question

我是webdesign的新手，所以我开始了一个非常简单的项目。我尝试制作一个带有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

这通常是因为当元素显示为inline-block时，元素之间的空间将呈现为文本。要解决此问题，请将父级上的font-size设置为0，然后重置子级上的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 2

通常，当元素之间存在某种填充/边距/边框时会发生这种情况。解决这个问题的最简单方法是将宽度从25％缩小。确保组合宽度低于100％。现在这就是为什么你的元素会在下面。

你想要实现的目标将使元素之间绝对没有空间。使用总量约96％的东西。这是每个李24％。

替代解决方案：

设置此属性 - ＆gt; box-sizing：border-box; 然后将宽度设置为25％。那应该解决它。你基本上要做的是使元素的宽度+填充+边框+边距= 25％

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

欢迎使用网页编程

Answer 3

你在li中有一个1px的边框，所以这个边框占据了其他元素的空间，换句话说，li的大小是25％加上1 px的边框。

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

stockpicks <- list()
a <- 0.3
b <- 0.7

    for (i in 1:nrow(data)) {


      input <- as.matrix(data[1,])


      #extract colnames of values between a and b

      efficient <- matrix(colnames(data[,which(input > a & input < b)]))


      # make a vector with new name for the output
      tmp_date   <- head(rownames(input), n=1)

      #rename column  
      colnames(efficient) <-tmp_date

      #export to list under new name
      stockpicks[[tmp_date]] <- efficient

    }

试试这个。

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

Answer 4

那是因为你有一个右边界，这意味着每个li块的总宽度为25％+ 1px，最后一个不适合。

由于您可能希望保留该边框并使四个按钮覆盖所有空间，您可以执行以下操作：

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

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

希望这可以帮助你; D

导航栏的宽度问题

4 个答案: