Question

我希望标题中的所有元素都在水平线上相互对齐。我还希望它们以Gray标题块为中心。到目前为止，这是它的样子。enter image description here这是我的第一个网站，所以我现在只是在玩，所以我很感激任何帮助或建议。

* 
  ====================================
  HEADER
  ====================================
*/

header {
	background-color: grey;
	opacity: 50%;
	width: 100%;
}

#logo {
	float: left;
	padding-top: 10px;
	padding-left: 30px;
}

#logo img {
	width: 15%;
	height: 15%;
}

#navigation { 
	margin: auto;
	clear: both;
	text-align: center;
	position: relative;
}

#navigation li {
	display: inline-block;
	padding: 5px 15px 5px 15px;
	color: #fff;
}

#navigation li a {
	color: #fff;
	text-transform: uppercase;
}

nav a.selected, nav a:hover {
	border-bottom: 1px solid #fff;
	padding-bottom: 0.75px;
}

.social-media {
	text-align: right;
	padding: 0 1.5em 0 0;
}

.social-media ul li {
	display: inline;
}

.social-media img {
	width: 30px;
	height: 30px;
	margin: 0 4px;
}

<header>
      <div id="logo">
        <a href="index.html"><img src="img/logo.png"></a>
      </div>

      <nav id="main-controls">
        <ul id="navigation">
          <li><a href="index.html" class="selected">Home</a></li>
          <li><a href="about.html">About</a></li>
          <li><a href="portfolio.html">Portfolio</a></li>
          <li><a href="services.html">Services</a></li>
          <li><a href="contact.html">Contact</a></li>
        </ul>

        <div class="social-media">
          <a href="http://www.facebook.com"><img src="img/facebook.png" alt="Facebook"></a>
          <a href="http://www.twitter.com"><img src="img/twitter.png" alt="Twitter"></a>
          <a href="http://www.instagram.com"><img src="img/instagram.png" alt="Instagram"></a>
          <a href="https://plus.google.com/"><img src="img/google+.png" alt="Google Plus"></a>
          <a href="https://www.linkedin.com/"><img src="img/linkedin.png" alt="Linked In"></a>
        </div>
      </nav>
    </header>

Answer 1

CSS的更新版本：

* 
  ====================================
  HEADER
  ====================================
*/

header {
  background-color: grey;
  opacity: 50%;
  width: 100%;
}

#logo {
  display: inline-block;
  padding-top: 10px;
  padding-left: 30px;
}

#logo img {
  width: 15%;
  height: 15%;
}

#navigation {
  display: inline-block;
  margin: auto;
  clear: both;
  text-align: center;
  position: relative;
}

#navigation li {
  display: inline-block;
  padding: 5px 15px 5px 15px;
  color: #fff;
}

#navigation li a {
  color: #fff;
  text-transform: uppercase;
}

nav a.selected, nav a:hover {
  border-bottom: 1px solid #fff;
  padding-bottom: 0.75px;
}

.social-media {
  display: inline-block;
  text-align: right;
  padding: 0 1.5em 0 0;
}

.social-media ul li {
  display: inline-block;
}

.social-media img {
  width: 30px;
  height: 30px;
  margin: 0 4px;
}

这应该注意水平对齐所有元素。我删除了声明的float属性，并在所有堆叠元素上使用了display: inline-block。

CSS：如何使用css排列标题中的元素？

1 个答案: