即使使用内联显示，列表仍在堆叠

时间：2016-12-26 06:52:08

标签： css list

前端开发的超级新手，但通过从头开始重新创建我喜欢的网站，尽最大努力改善它。到目前为止，这么好，但由于某些原因，导航棒是我存在的祸根。

现在，由于我只能想象的宽度问题，导航链接（在div内部的li）正在堆叠。当我设置一定的宽度时，它们不再叠加，但设置该宽度会限制我使用我的按钮将它们对齐。

所以，我想做的是将“logo”div与左侧和左侧对齐。 “nav_content”div与右侧对齐。当我点击平板电脑断点时，“nav_content”div将折叠成汉堡包菜单。希望这个问题有道理。

这是我的代码：

HTML＆amp; CSS 

body {
  font-family: "Open-Sans", Helvetica, sans-serif;
  background-color: #ED4C21;
}

.wrapper {
  width: 1100px;
  max-width: 100%;
  margin: 0 auto;
}

nav {
  background-color: #ffffff;
  border-top: 5px solid #122333;
  height: 100px;
  margin: 0 auto;
  width: 100%;
}

.logo {
  font-family: "Khand", Helvetica, sans-serif;
  color: #122333;
  font-size: 24px;
  font-weight: 600;
  float: left;
  line-height: 0;
  padding-top: 17px;
  margin-left: 2%;
}

.nav_content {
  float: right;
  margin: 0 auto;
  width: auto;
  width: 75%;
}

.nav_links {
  margin-left: .5rem;
  float: left;
  list-style-type: none;
  padding-top: 22px;
}

.nav_links li {
  display: inline;
  margin-left: 4%;
}

.nav_links a {
  color: #122333;
  text-decoration: none;
  font-family: Helvetica, sans-serif;
  font-size: 16px;
  font-weight: 600;
}

.nav_links a:hover {
  color: #ED4C21;
}

.nav_buttons {
  float: left;
  padding-top: 37px;
}

.button {
  font-family: "Khand", Helvetica, sans-serif;
  outline: none;
  padding: 1rem 1.5rem;
  text-decoration: none;
  text-align: center;
  cursor: pointer;
  overflow: hidden;
  display: inline;
  font-weight: 600;
  font-size: 17px;
  color: #ffffff;
  letter-spacing: 2px;
  text-transform: uppercase;
}

.button1 {
  background-color: #ED4C21;
}

.button2 {
  margin-left: -2px;
  background-color: #122333;
}

.button2:hover {
  background-color: #ED4C21;
}
  <!DOCTYPE html>
<html>
<head>
  <title>Fast Gear</title>
  <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
  <link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css?family=Khand:400,500,600" rel="stylesheet">
  <link rel="stylesheet" type="text/css" href="css/styles.css">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script>
</head>

<body>

  <header>
    <nav>
      <div class="wrapper">
        <div class="logo">
          <h1>Fast Gear</h1>
        </div>
        <div class="nav_content">
          <div class="nav_links">
            <ul>
              <li><a href="#">Home</a></li>
              <li><a href="#">Features</a></li>
              <li><a href="#">Services</a></li>
              <li><a href="#">Blog</a></li>
              <li><a href="#">Contact</a></li>
            </ul>
          </div>
          <div class="nav_buttons">
            <div class="button button1">123-456-7890</div>
            <div class="button button2">Order Online</div>
          </div>
        </div>
      </div>
    </nav>
  </header>



</body>
</html>

2 个答案:

答案 0 :(得分：0)

我认为你需要设置内联链接和按钮，所以设置style ='clear：both'设置在同一行

答案 1 :(得分：0)

在padding-left: 0;中添加ul以消除此方案中的宽度问题。我建议使用bootstrap来实现超级响应的网页设计。如果您仍想使用自己的响应式设计，请在需要位于同一行的所有兄弟中使用width（以％为单位）。例如，%和div.logo中的div.nav_content应提及宽度。

＆＃13;
＆＃13; 
body {
  font-family: "Open-Sans", Helvetica, sans-serif;
  background-color: #ED4C21;
}

.wrapper {
  width: 1100px;
  max-width: 100%;
  margin: 0 auto;
}

nav {
  background-color: #ffffff;
  border-top: 5px solid #122333;
  height: 100px;
  margin: 0 auto;
  width: 100%;
}

.logo {
  font-family: "Khand", Helvetica, sans-serif;
  color: #122333;
  font-size: 24px;
  font-weight: 600;
  float: left;
  line-height: 0;
  padding-top: 17px;
  margin-left: 2%;
}

.nav_content {
  float: right;
  margin: 0 auto;
  width: auto;
  width: 75%;
}

.nav_links {
  margin-left: .5rem;
  float: left;
  list-style-type: none;
  padding-top: 22px;
}

.nav_links ul {
  padding-left: 0;
}
.nav_links li {
  display: inline;
  margin-left: 4%;
}

.nav_links a {
  color: #122333;
  text-decoration: none;
  font-family: Helvetica, sans-serif;
  font-size: 16px;
  font-weight: 600;
}

.nav_links a:hover {
  color: #ED4C21;
}

.nav_buttons {
  float: left;
  padding-top: 37px;
}

.button {
  font-family: "Khand", Helvetica, sans-serif;
  outline: none;
  padding: 1rem 1.5rem;
  text-decoration: none;
  text-align: center;
  cursor: pointer;
  overflow: hidden;
  display: inline;
  font-weight: 600;
  font-size: 17px;
  color: #ffffff;
  letter-spacing: 2px;
  text-transform: uppercase;
}

.button1 {
  background-color: #ED4C21;
}

.button2 {
  margin-left: -2px;
  background-color: #122333;
}

.button2:hover {
  background-color: #ED4C21;
}
＆＃13; 
<!DOCTYPE html>
<html>
<head>
  <title>Fast Gear</title>
  <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
  <link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css?family=Khand:400,500,600" rel="stylesheet">
  <link rel="stylesheet" type="text/css" href="css/styles.css">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script>
</head>

<body>

  <header>
    <nav>
      <div class="wrapper">
        <div class="logo">
          <h1>Fast Gear</h1>
        </div>
        <div class="nav_content">
          <div class="nav_links">
            <ul>
              <li><a href="#">Home</a></li>
              <li><a href="#">Features</a></li>
              <li><a href="#">Services</a></li>
              <li><a href="#">Blog</a></li>
              <li><a href="#">Contact</a></li>
            </ul>
          </div>
          <div class="nav_buttons">
            <div class="button button1">123-456-7890</div>
            <div class="button button2">Order Online</div>
          </div>
        </div>
      </div>
    </nav>
  </header>



</body>
</html>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题