我正在尝试将徽标,导航链接和社交图标对齐在一行上。我在我的页面上使用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
并根据导航中的链接数量将其自行调整为一行和社交图标。
答案 0 :(得分:1)
如何解决这个问题的一个小例子。
This link了解更多关于块与内联之间差异的信息。
/*div > div : div child of div*/
div > div {
display: inline-block;
}
&#13;
<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>
&#13;
修改: 如果要填写“最后一部分”,这会使他们在一行上打破下一行&#39;
#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;
}
&#13;
<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 -->
&#13;
答案 1 :(得分:1)
social
和nav
元素需要display: inline-block
属性。另外,使用 vertical-align 和 line-height ,您可以对齐同一行。
答案 2 :(得分:0)
使用display:inline-block; float: left;
在演示中,为徽标设置徽标的工作正常。之后display:inline-block;
导航和社交链接并为他们设置line-height
,即等于徽标的高度。