Question

我正在尝试建立一个网站（只是为了学习，不是一个真正的网站），在顶部有链接到页面的不同部分。 HTML如下：

<!DOCTYPE html>
<html>
  <head>
    <link href="http://s3.amazonaws.com/codecademy-content/courses/ltp/css/shift.css" rel="stylesheet">
    <link rel="stylesheet" href="main.css">
  </head>

  <body>
    <div class="nav">
      <div class="container">
        <ul>
          <li><a href="#">Airbnb logo</a></li>
          <li><a href="#">Browse</a></li>
        </ul>
        <ul>
          <li><a href="#">Sign Up</a></li>
          <li><a href="#">Log In</a></li>
          <li><a href="#">Help</a></li>
        </ul>
      </div>
    </div>

    <div class="header">
      <div class="container">
        <h1>Find a place to stay.</h1>
        <p>Rent from people in over 34,000 cities and 192 countries.</p>
      </div>
    </div> 

    <div class="learn-more">
      <div>
        <div>
          <div>
            <h3>Travel</h3>
            <p>From apartments and rooms to treehouses and boats: stay in unique spaces in 192 countries.</p>
            <p><a href="#">See how to travel on Airbnb</a></p>
          </div>
          <div>
            <h3>Host</h3>
            <p>Renting out your unused space could pay your bills or fund your next vacation.</p>
            <p><a href="#">Learn more about hosting</a></p>
          </div>
          <div>
            <h3>Trust and Safety</h3>
            <p>From Verified ID to our worldwide customer support team, we've got your back.</p>
            <p><a href="#">Learn about trust at Airbnb</a></p>
          </div>
        </div>
      </div>
    </div>
  </body>
</html>

现在我正在尝试设置页面样式，但我希望导航栏的所有元素都在同一行。

到目前为止，我有：

.nav a {
  color: #5a5a5a;
  font-size: 11px;
  font-weight: bold;
  padding: 14px 10px;
  text-transform: uppercase;
}

.nav li {
    display: inline;
}

.header {
  background-image:url('http://bit.ly/1KIFZoI');
  background-size: cover;
  height: 300px;
}

.header h1 {
  color: #fff;
  font-size: 48px;  
  font-family: 'Shift', sans-serif;
  font-weight: bold;
}

.header p {
  font-size: 20px;
  color: #fff;
}

然而，显示：内联;仍然将我的导航栏分成两行。如果可能的话，我希望它们都在同一行中，而不是将所有元素放在同一个列表中（相同的ul）

谢谢！

Answer 1

这样做：

ul{
    display: inline-block;
    vertical-align: middle;
}

注意：由于你的原因，<ul>中有默认填充他们之间有差距。只需将padding:0和/或margin:0添加到 <ul>消除差距（调整您的需求）。

<强> DEMO HERE

在同一行

1 个答案: