Question

＆＃13;

/* Generic Styles */
body {
    background: #ffffff;
    color: #222222;
    font: 1em;
}

.container {
	margin: auto;
	width: 90%;
}

img {
	max-width: 100%;
}

/* Layout Styles */
header {
	background-image: url(../images/rocket.png);
	background-repeat: no-repeat;
	background-size: contain;
	background-position: left;
	background-color: #003151;
}

header img {
	float: left;
	margin-top: 30px;
}

header h3 {
	clear: both;
}

nav {
	float: right;
	width: 100%;
	font-size: 1.250em;
	font-weight: bold;
	text-transform: uppercase;
	margin-top: 62px;
	}

nav ul {
	list-style: none;
}

nav ul li {
	float: left;
	display: block;
	margin-right: 04%;
}

nav ul li:last-child {
	margin-right: 0;
}

nav ul li a {
	color: #ffffff;
	text-decoration: none;
}

＆＃13;

<header>

  <div class="container">

    <a href="#" title="Home page"><img src="images/logo.png" alt="Logo" /></a>

    <nav>
      <ul>
        <li><a href="#" title="Home page" class="current">Home</a></li>
        <li><a href="portfolio" title="See some of my featured work">Portfolio</a></li>
        <li><a href="services" title="Learn more about my services">Services</a></li>
        <li><a href="about" title="Learn more about me">About</a></li>
        <li><a href="blog" title="View latest posts">Blog</a></li>
        <li><a href="faqs" title="View latest FAQS">FAQS</a></li>
        <li><a href="contact" title="Get in touch">Contact</a></li>
      </ul>
    </nav>

    <h3>BlahBlahBlahH3</h3>

    <p>BlahBlahBlah</p>

    <a href="#" class="btn" title="Get in touch">Get in touch</a>

  </div>
  <!-- End Container -->

</header>
<!-- End Header -->

＆＃13;

尽管我付出了最大努力，但好像nav元素有某种填充或边距（它没有）。如果我将宽度设置为100％以阻止nav溢出到两条线上，则会跳到徽标下方，而不是在与徽标相同的行上向右浮动。从很多试验和错误开始，代码可能有点乱，但任何人都可以解释为什么如果我不将nav元素设置为宽度100％，nav溢出到两行或者为什么如果它设定为100％它不会保持浮动到右边？

Answer 1

Heyo，

看起来你的％保证金正在飙升。如果你愿意与之分道扬and（建议如果你将会在4％非常小的狭小空间里），试试这个：

nav {
  float: right;
  font-size: 1.250em;
  font-weight: bold;
  text-transform: uppercase;
}

nav ul {
  list-style: none;
  float: right;
}

nav ul li {
  float: left;
  display: block;
  margin-right: 20px;
}

你的导航相当大，所以在900px断点附近，你要么减小字体大小，要么全部转移到浮点数：左边，这样当它低于徽标时它会看起来更多自然。

Answer 2

从width: 100%移除nav。
从padding移除margin和ul（默认情况下由浏览器添加）
减少font-size个nav个项目 - 如果它太大，nav会包裹！
请注意，container的{{1}}为width - 由于nav在此范围内，因此无法到达最右边。

＆＃13;

/* Generic Styles */

body {
  background: #ffffff;
  color: #222222;
  font: 1em;
}

.container {
  margin: auto;
  width: 90%;
}

img {
  max-width: 100%;
}


/* Layout Styles */

header {
  background-image: url(../images/rocket.png);
  background-repeat: no-repeat;
  background-size: contain;
  background-position: left;
  background-color: #003151;
}

header img {
  float: left;
  margin-top: 30px;
}

header h3 {
  clear: both;
}

nav {
  float: right;
  font-size: 1.250em;
  font-weight: bold;
  text-transform: uppercase;
  margin-top: 62px;
}

nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

nav ul li {
  float: left;
  display: block;
  margin-right: 14px;
}

nav ul li:last-child {
  margin-right: 0;
}

nav ul li a {
  color: #ffffff;
  text-decoration: none;
  font-size: 14px;
}

＆＃13;

<header>

  <div class="container">

    <a href="#" title="Home page"><img src="images/logo.png" alt="Logo" /></a>

    <nav>
      <ul>
        <li><a href="#" title="Home page" class="current">Home</a></li>
        <li><a href="portfolio" title="See some of my featured work">Portfolio</a></li>
        <li><a href="services" title="Learn more about my services">Services</a></li>
        <li><a href="about" title="Learn more about me">About</a></li>
        <li><a href="blog" title="View latest posts">Blog</a></li>
        <li><a href="faqs" title="View latest FAQS">FAQS</a></li>
        <li><a href="contact" title="Get in touch">Contact</a></li>
      </ul>
    </nav>

    <h3>BlahBlahBlahH3</h3>

    <p>BlahBlahBlah</p>

    <a href="#" class="btn" title="Get in touch">Get in touch</a>

  </div>
  <!-- End Container -->

</header>
<!-- End Header -->

＆＃13;

导航元素不会完全浮动到右侧

2 个答案: