Question

几周前我刚刚开始使用HTML和CSS，并希望得到一些帮助。我正在寻找一种优雅的方式来对齐标题中的几个元素。

我不熟悉使用网格。我尝试使用display：inline-block和display：table但是我并没有按照我喜欢的方式工作。所以我不得不使用花车，这是有效的，但我觉得它是强迫的。

我也希望内容与.nav-content的范围相同，但我猜55％的容器与标题的55％不同？

无论如何，继承人的代码：

＆＃13;

* {
  box-sizing: border-box;
}
.container {
  max-width: 100%;
  height: 100%;
}
/******************************************
Header / Navbar
*******************************************/

.navigation {
  width: 100%;
  border-bottom: solid 1px #eee;
  position: fixed;
  Z-Index: 500;
  font-size: 14px;
  box-sizing: border-box;
  font-weight: 400;
  font-style: normal;
  line-height: 1.6;
  min-height: 65px;
  padding-top: 10px;
}
.nav-content {
  width: 55%;
  margin: 0 auto;
  overflow: hidden;
  position: relative;
}
.nav-logo,
.navigation li {
  float: left;
}
.nav-right,
.nav-btn {
  float: right;
}
.nav-left {
  font-size: 26;
  padding-left: 1%;
  padding-top: 0.5%;
}
.nav-left li {
  margin-right: 1%;
  margin-left: 1%;
}
.navigation ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.nav-right {
  padding-right: 1%;
  margin-top: -25px;
}

＆＃13;

<head>
  <meta charset="UTF-8">
  <meta name="description" content="We are medium. We write about startups.">
  <meta name="keywords" content="Medium, blogging, startups, entrepreneurship, Unternehmer, Gründung, Unternehmensgründung, gründen, Venture Capital, Business Angel, Investor, Wagniskapital, Risikokapital">
  <meta name="author" content="William Middendorf">
  <meta name="robots" content="index, follow">
  <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
  <title>Medium</title>
  <link href='https://fonts.googleapis.com/css?family=Open+Sans:400,700,400italic|Montserrat:400,700' rel='stylesheet' type='text/css'>
  <link rel="stylesheet" href="font-awesome/css/font-awesome.min.css">
  <link rel="stylesheet" href="css/normalize.css">
  <link rel="stylesheet" href="css/style.css">
  <link rel="icon" href="img/favicon.ico" type="image/x-icon">
</head>

<body>
  <div class="container">
    <div class="navigation">
      <!--Navigation-->
      <div class="nav-left">
        <ul>
          <li><i class="fa fa-bars"></i>
          </li>
          <li><i class="fa fa-search"></i>
          </li>
        </ul>
      </div>
      <div class="nav-content">
        <div class="nav-logo">Blogger</div>
        <div class="nav-btn">
          <button class="wrt-btn">Schreib' einen Artikel</button>
        </div>
      </div>
      <div class="nav-right">
        <ul>
          <li><a href="#" style="cursor: auto;">Log In</a>
          </li>
          <li><a href="#" style="cursor: auto;">Register</a>
          </li>
        </ul>
      </div>
    </div>
    <!--End of Navigation / Header-->

  </div>
  <!--End of Container-->
</body>

＆＃13;

Answer 1

漂浮是不好的方式去这里。如果需要，您将无法在移动视图中将它们居中。

使用display: inline-block;并且不要留空格或新行是按钮之间的html代码，以避免它们之间的差距。

Answer 2

使用inline-block和宽度百分比以及text-align，您可以避免使用浮点数和边距。这是一个演示：http://jsfiddle.net/swm53ran/349/

.section, li, .nav-logo, .nav-btn {
    display:inline-block;
}
.nav-left, .nav-right, .nav-content {
    width: 32%;
}
.nav-right {
    text-align: right;
}
.nav-logo, .nav-btn {
    width: 49%;
}

在导航栏中对齐几个div的更优雅方式？

2 个答案: