Question

我将.inside设为width:100%，将span设为width:25%，但第四个范围不断被推下。

Answer 1

＆＃13;

.nav_list {
  width: 100%;
  max-width: 800px;
  display: block;
}
ul {
  list-style: none;
  overflow: hidden;
  /*as we will give its child element FLOAT property*/
}
.inside {
  width: 100%;
}
.inside > li {
  width: 25%;
  float: left;
  /* Inline-block has a browser issue, it leaves some margin*/
  text-align: center;
  display: inline-block;
  list-style-type: none;
}
.button-dropdown > a {
  text-decoration: none;
  color: #000;
}
.nav .button-dropdown {
  position: relative;
}
.nav li a {
  display: block;
  color: #333;
  background-color: #fff;
  padding: 10px 20px;
  text-decoration: none;
}
.nav li a span {
  display: inline-block;
  margin-left: 5px;
  font-size: 10px;
  color: #999;
}
.nav li a:hover,
.nav li a.dropdown-toggle.active {
  background-color: #289dcc;
  color: #fff;
}
.nav li a:hover span,
.nav li a.dropdown-toggle.active span {
  color: #fff;
}
.nav li .dropdown-menu {
  display: none;
  position: absolute;
  left: 0;
  padding: 0;
  margin: 0;
  margin-top: 3px;
  text-align: left;
}
.nav li .dropdown-menu.active {
  display: block;
}
.nav li .dropdown-menu a {
  width: 150px;
}

＆＃13;

<div class="nav_list">
  <ul class="nav inside">
    <li class="button-dropdown">
      <a href="javascript:void(0)" class="dropdown-toggle">
        Projects
      </a>
    </li>
    <li class="button-dropdown">
      <a href="javascript:void(0)" class="dropdown-toggle">
        Projects
        </a>
    </li>
    <li class="button-dropdown">
      <a href="javascript:void(0)" class="dropdown-toggle">
        → Resume (PDF)
      </a>
    </li>
    <li class="button-dropdown">
      <a href="javascript:void(0)" class="dropdown-toggle">
        About
      </a>
    </li>
  </ul>
</div>

＆＃13;

最简单的方法是将float:left添加到您的子元素中。或者您也可以为父元素font-size:0及其子元素提供font-size:needed font-size属性，这样您就不需要提供FLOAT:LEFT属性，第四个元素将保持内联。

您的HTML结构有点不对 - 遵循一些不经验的做法，但未经过验证。例如：在UL内部不应该作为直接孩子的任何DIV。

在此处阅读有关内联块问题的更多信息： https://css-tricks.com/fighting-the-space-between-inline-block-elements/

Answer 2

没有在你的代码中添加任何内容，只是删除了div中的div和span这样的错误做法，这对于现在看起来很好。如果你想以某种方式，而不是这样，请告诉我们，这将是有效的。

.nav_list {
  width: 100%;
  max-width: 800px;
  display: block;
}
ul {
  list-style: none;
}
.button-dropdown > a {
  text-decoration: none;
  color: #000;
}
.nav li {
  display: inline-block;
  list-style: none;
}
.nav .button-dropdown {
  position: relative;
}
.nav li a {
  display: block;
  color: #333;
  background-color: #fff;
  padding: 10px 20px;
  text-decoration: none;
}
.nav li a span {
  display: inline-block;
  margin-left: 5px;
  font-size: 10px;
  color: #999;
}
.nav li a:hover,
.nav li a.dropdown-toggle.active {
  background-color: #289dcc;
  color: #fff;
}
.nav li a:hover span,
.nav li a.dropdown-toggle.active span {
  color: #fff;
}
.nav li .dropdown-menu {
  display: none;
  position: absolute;
  left: 0;
  padding: 0;
  margin: 0;
  margin-top: 3px;
  text-align: left;
}
.nav li .dropdown-menu.active {
  display: block;
}
.nav li .dropdown-menu a {
  width: 150px;
}

<div class="nav_list">
  <ul class="nav">
    <li class="button-dropdown"> <a href="javascript:void(0)" class="dropdown-toggle">
      Projects
    </a>

    </li>
    <li class="button-dropdown"> <a href="javascript:void(0)" class="dropdown-toggle">
      Projects
    </a>

    </li>
    <li class="button-dropdown"> <a href="javascript:void(0)" class="dropdown-toggle">
      → Resume (PDF)
    </a>

    </li>
    <li class="button-dropdown"> <a href="javascript:void(0)" class="dropdown-toggle">
      About
    </a>

    </li>
</div>
</ul>
</div>

Answer 3

这是因为如果元素存在，内联块会在元素之间保留空格。

你可以：

在前一个结束后立即打开下一个范围
使用display：block; float：left;并清除浮动（例如通过溢出：隐藏在.inside上）

无法在div内均匀分布跨度

3 个答案: