我正在尝试将徽标,导航链接和社交图标对齐在一行上。我在页面上使用引导程序和自定义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
最佳答案
social
和nav
元素需要display: inline-block
属性。同样,通过vertical-align和line-height,您可以对齐同一条线。
小提琴:https://jsfiddle.net/xs364op0/14/