Question

我想在标题中对齐我的元素，以便它们定位，如下所示：

LOGO SEARCH LINK|LINK

徽标从最左边开始，而搜索在中间，右边的链接，而我希望搜索是徽标div和siteMeta之间空间的最大宽度，我不想要打破响应。

body {
  margin: 0 auto;
}
.container {
  border: 1px solid blue;
  box-sizing: border-box;
  padding: 0;
}
#logo {
  float: left;
  max-width: 220px;
}
#search {
  float: left;
  max-width: 300px;
  margin-top: 75px;
}
#siteMeta {
  float: left;
  max-width: 300px;
  height: 220px;
  line-height: 220px;
}

<div class="container">
  <div id="header">
    <div id="logo">
      <img src="images/logo.png" class="img-responsive">
    </div>
    <div id="search">
      <form class="navbar-form" role="search">
        <div class="input-group add-on">
          <input class="form-control" placeholder="Search" name="srch-term" id="srch-term" type="text">
          <div class="input-group-btn">
            <button class="btn btn-default" type="submit"><i class="glyphicon glyphicon-search"></i></button>
          </div>
        </div>
      </form>
    </div>
    <div id="siteMeta">
      <a href="#">Link</a>
      <a href="#">Link</a>
    </div>
  </div>
</div>

Answer 1

如果你想使用flexbox布局，它可以很容易。（浏览器支持带前缀的IE10 +）

#header {
  display: flex;
  align-items: center;
}
#search {
  background: pink;
  flex: 1;
  text-align: center;
}

<div id="header">
  <div id="logo">Logo</div>
  <div id="search">Search</div>
  <div id="siteMeta">Link</div>
</div>

如果确实需要支持IE9和IE8，可以使用CSS表格实现类似的布局。

#header {
  display: table;
  width: 100%;
}
#logo, #search, #siteMeta {
  display: table-cell;
  vertical-align: middle;
  white-space: nowrap;
}
#search {
  background: pink;
  width: 100%;
  text-align: center;
}

<div id="header">
  <div id="logo">Logo</div>
  <div id="search">Search</div>
  <div id="siteMeta">Link</div>
</div>

Answer 2

您可以使用calc属性的width值解决此问题。

我必须在你的CSS中添加以下内容。我已将max-width属性替换为width，并添加了一些背景以更好地观察结果。

#search{
    width: calc(100% - 220px - 300px);
}

#search input {
    width: 100%;
    box-sizing: border-box;
}

#siteMeta{
    width: 300px;
}

#logo{
    width: 220px;
}

https://jsfiddle.net/9h3zm2sc/

如果您需要更广泛的支持，您还可以使用以下方法解决问题：

* {
     box-sizing: border-box;
}

#search{
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    padding-left: 220px; /* width of the logo */
    padding-right: 300px; /* width of the siteMeta */
}

#siteMeta{
    float: right;
}

https://jsfiddle.net/mehabrzz/1/

Answer 3

您可以将#header表格及其子元素table-cells设为width: 33%;：

＆＃13;

body {
  margin: 0 auto;
}
.container {
  border: 1px solid blue;
  box-sizing: border-box;
  padding: 0;
}
#header {
  display: table;
  width: 100%;
  }
#header > * {
  display: table-cell;
  width: 33%;
  }
#logo {
}
#search {
  margin-top: 75px;
  text-align: center;
}
#siteMeta {
  text-align: right;
  height: 220px;
  line-height: 220px;
}

＆＃13;

<body>

  <div class="container">
    <div id="header">
      <div id="logo">
        <img src="images/logo.png" class="img-responsive">
      </div>
      <div id="search">
        <form class="navbar-form" role="search">
          <div class="input-group add-on">
            <input class="form-control" placeholder="Search" name="srch-term" id="srch-term" type="text">
            <div class="input-group-btn">
              <button class="btn btn-default" type="submit"><i class="glyphicon glyphicon-search"></i>
              </button>
            </div>
          </div>
        </form>
      </div>
      <div id="siteMeta">
        <a href="#">Link</a>
        <a href="#">Link</a>
      </div>

    </div>

＆＃13;

Answer 4

CSS表可以做到这一点。

简化布局

.container {
  display: table;
  width: 100%;
  border: 1px solid grey;
}
#header,
#logo,
#search,
#siteMeta {
  display: table-cell;
}
#siteMeta a {
  display: table-cell;
  padding: 0 1em;
  text-align: center;
}
#search {
  width: 100%;
  text-align: center;
  background: lightblue;
}

<div class="container">
  <div id="header">
    <div id="logo">
      LOGO
    </div>

    <div id="search">
      <form class="navbar-form" role="search">
        <div class="input-group add-on">
          SEARCH
        </div>
      </form>
    </div>
    <div id="siteMeta">
      <a href="#">Link</a>
      <a href="#">Link</a>
    </div>

  </div>

Answer 5

简单地没有桌子和弹性：

body {
  margin: 0 auto;
  text-align:center;
}

#header {
  width: 100%;
}
#logo {
 float:left;
 width:33%;
}
#search {
  float: left;
  width:33%;
}
#siteMeta {
  float: left;
  width:33%;
}

<body>

  <div class="container">
    <div id="header">
      <div id="logo">
        <img src="images/logo.png" class="img-responsive">
      </div>
      <div id="search">
        <form class="navbar-form" role="search">
          <div class="input-group add-on">
            <input class="form-control" placeholder="Search" name="srch-term" id="srch-term" type="text">
            <div class="input-group-btn">
              <button class="btn btn-default" type="submit"><i class="glyphicon glyphicon-search"></i>
              </button>
            </div>
          </div>
        </form>
      </div>
      <div id="siteMeta">
        <a href="#">Link</a>
        <a href="#">Link</a>
      </div>

    </div>

将标题元素与左中右对齐

5 个答案: