将徽标、导航和社交图标对齐在一条线上

Question

我正在尝试将徽标、导航链接和社交图标对齐在一条线上。我在我的页面上使用 bootstrap 和自定义 css 样式。

HTML:

<header id="header-main">
  <div id="site-header">
    <div class="container">
      <div class="row">
        <div class="col-sm-12">
          <div id="site-logo">
            <a href="www.google.com"><img src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" alt="" /></a>
          </div>
          <div class="social-set">
            <a href="https://www.facebook.com" target="_blank">
              <li class="fa fa-facebook"></li>
            </a>
          </div>
          <!-- end social-set -->
          <nav id="nav">
            <div class="menu-main-container">
              <ul id="menu-main" class="menu">
                <li id="menu-item-47" class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-33 current_page_item menu-item-47"><a href="http://www.website.com/">Home</a></li>
              </ul>
            </div>
          </nav>
        </div>
        <!-- .col-sm-12 -->
      </div>
      <!-- .row -->
    </div>
    <!-- .container -->
  </div>
  <!-- .site-header -->

CSS:

#header-main {
  width: 100%;
  margin: 0 0 9px 0;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 100;
}

#site-header {
  max-width: 1280px;
  margin: 0 auto;
  background: #fff;
  position: relative;
}

#site-logo {
  margin: 0;
  padding: 0;
  line-height: 1em;
  position: relative;
  font-weight: 900;
  font-size: 2em;
  z-index: 999;
  display: inline-block;
}

.social-set ul {
  margin: 6px 0 0 !important;
  padding: 0;
  display: inline;
}

.social-set ul li {
  padding: 0 2px 5px 0;
  margin: 0;
  display: inline-block;
  border: none !important;
  clear: none;
  line-height: 100%;
}

.social-set li img {
  vertical-align: middle;
  margin-top: -3px;
}

#nav {
  max-height: 100px;
  overflow: hidden;
}

#nav ul {
  margin: 0 0 30px 0;
  text-align: center;
}

#nav ul {
  margin: 0 0 30px 0;
  text-align: center;
}

#nav li {
  padding: 0 16px;
  font: 400 18px/13px 'Open Sans', sans-serif;
  display: inline-block;
  text-transform: uppercase;
}

.social-set {
  float: right;
  margin-bottom: 10px;
}

我可以使用 position: absolute 将徽标设置在一行的固定位置，但我想使用 position relative 并让它根据链接的数量在一行上自行调整在导航和社交图标中。

JSFiddle demo

Answer 1

使用 display:inline-block; float: left; 在演示中，将这些设置为徽标对徽标有效。然后 display:inline-block; 导航和社交链接并为它们设置一个 line-height，等于徽标的高度。

Answer 2

一个如何解决这个问题的小例子..

This link 进一步了解块与内联之间的区别。

/*div > div : div child of div*/
div > div {
  display: inline-block;
}

<div>
  <div><img src="http://lorempixel.com/50/50/">
  </div>
  <div><img src="http://lorempixel.com/50/50/">
  </div>
  <div><img src="http://lorempixel.com/50/50/">
  </div>
  <div><img src="http://lorempixel.com/50/50/">
  </div>
  <div><img src="http://lorempixel.com/50/50/">
  </div>
</div>

编辑： 如果要将 'last part' 打断到 'next line'[，这会使它们在一行上=15=]

#header-main {
  margin: 0 0 9px 0;
}
#site-header {
  max-width: 1280px;
  margin: 0 auto;
  background: #fff;
}
#site-logo {
  margin: 0;
  padding: 0;
  line-height: 1em;
  font-weight: 900;
  font-size: 2em;
  display: inline-block;
}
.social-set ul {
  margin: 6px 0 0 !important;
  padding: 0;
  display: inline;
}
.social-set ul li {
  padding: 0 2px 5px 0;
  margin: 0;
  display: inline-block;
  border: none !important;
  clear: none;
}
.social-set {
  display: inline-block;
}
.social-set li img {
  vertical-align: middle;
  margin-top: -3px;
}
#nav {
  max-height: 100px;
  overflow: hidden;
  display: inline-block;
}
#nav ul {
  margin: 0 0 30px 0;
  text-align: center;
}
#nav ul {
  margin: 0 0 30px 0;
  text-align: center;
}
#nav li {
  padding: 0 16px;
  font: 400 18px/13px'Open Sans', sans-serif;
  display: inline-block;
  text-transform: uppercase;
}
.social-set {
  margin-bottom: 10px;
}

<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<header id="header-main">
  <div id="site-header">
    <div class="container-fluid">
      <div class="row">
        <div class="col-sm-12">
          <div id="site-logo">
            <a href="www.google.com">
              <img src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" alt="" />
            </a>
          </div>
          <div class="social-set">
            <a href="https://www.facebook.com" target="_blank">
              <li class="fa fa-facebook"></li>
            </a>
            <a href="https://www.facebook.com" target="_blank">
              <li class="fa fa-facebook"></li>
            </a>
            <a href="https://www.facebook.com" target="_blank">
              <li class="fa fa-facebook"></li>
            </a>
            <a href="https://www.facebook.com" target="_blank">
              <li class="fa fa-facebook"></li>
            </a>
          </div>
          <!-- end social-set -->
          <nav id="nav">
            <div class="menu-main-container">
              <ul id="menu-main" class="menu">
                <li id="menu-item-47" class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-33 current_page_item menu-item-47"><a href="http://www.website.com/">Home</a>
                </li>
                <li id="menu-item-47" class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-33 current_page_item menu-item-47"><a href="http://www.website.com/">Home</a>
                </li>
                <li id="menu-item-47" class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-33 current_page_item menu-item-47"><a href="http://www.website.com/">Home</a>
                </li>
                <li id="menu-item-47" class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-33 current_page_item menu-item-47"><a href="http://www.website.com/">Home</a>
                </li>
              </ul>
            </div>
          </nav>
        </div>
        <!-- .col-sm-12 -->
      </div>
      <!-- .row -->
    </div>
    <!-- .container -->
  </div>
  <!-- .site-header -->

Answer 3

social 和 nav 元素需要 display: inline-block 属性。此外，vertical-align 和 line-height 你可以对齐到同一行。

Fiddle: https://jsfiddle.net/xs364op0/14/

将徽标、导航和社交图标对齐在一条线上

align logo, nav and social icons on one line

html

css

inline

alignment

twitter-bootstrap