宽度和浮动不兼容吗？

Question

我的网站navbar宽度为41％，float: right，但要使float: right有效，我必须删除width: 41%，为什么？ width和float之间是否存在任何不兼容性？

  <header class="tab-content cabecera">
  <a class="logo pull-left" href="/">
    <img src="images/logo1.png" width="250px" alt="ziiweb"/>
  </a>
  <div class="social">
    <div class="fb-like" data-href="http://www.facebook.com/!!!" data-send="false" data-layout="box_count" data-width="450" data-show-faces="false"></div>
    <g:plusone align="middle"></g:plusone>
  </div>
  <nav>
  <ul class="nav nav-pills">
    <li class="active"><a href="#">Inicio</a></li>
    <li><a href="#">Qué ofrecemos</a></li>
    <li><a href="#">Trabajos</a></li>
    <li><a href="#">Contacto</a></li>
  </ul>
  </nav>

---

a.logo {
  vertical-align: top;
  width: 37%;
}
.social {
  display: inline-block;
  width: 21%;
}
nav {
  display: inline-block;
  float: right;
  width: 41%;
}

Answer 1

不，他们 兼容。

nav确实是按照您的意愿浮动，宽度不会影响它。您删除width:41%时看到的差异是nav元素的大小发生变化，从而删除了ul内部空格。

有三种方法可以解决此问题

1. 将ul添加到您的nav规则
，将float:right移到右侧.nav
2. 更改nav的宽度以匹配其中ul的宽度。
3. 删除nav
上的width属性





查看ul.nav的宽度与nav的宽度相同，而ul中的项目位于nav的左侧？执行上面列出的其中一项操作会导致项目显示在靠近右侧的位置，因为我相信您的意图。

更正＃1的示例（向右浮动.nav）