我必须在右侧显示文本左侧和字体真棒图标。现在我得到文本下面的所有字体真棒图标。我认为这可能非常简单,但仍然,我无法让它工作.Would你能帮助我吗?
.top-contact-menu {
background-color: #6aaf08;
width: 100%;
padding: 5px 0px;
}
.top-contact-menu h2 {
color: #fff;
font-size: 14px;
}
ul.address-top-menu {
list-style: none;
}
ul.address-top-menu li {
display: inline-block;
}
ul.address-top-menu li:after {
content: '|';
color: #fff;
}
ul.address-top-menu li:last-child:after {
content: ' ';
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet" />
<div class="top-contact-menu">
<h2>we are open:10am to 8pm</h2>
<ul class="address-top-menu">
<li><i class="fa fa-phone"></i>
</li>
<li><i class="fa fa-envelope-o"></i>
</li>
<li>
<i class="fa fa-facebook"></i>
<i class="fa fa-twitter"></i>
<i class="fa fa-instagram"></i>
<i class="fa fa-google-plus"></i>
</li>
</ul>
</div>
&#13;
答案 0 :(得分:4)
使用 Float 。它可以帮助您将内容推向极致。
.top-contact-menu {
background-color: #6aaf08;
width: 100%;
padding: 5px 0px;
}
.top-contact-menu h2 {
color: #fff;
font-size: 14px;
display: inline-block;
}
ul.address-top-menu {
list-style: none;
float: right;
padding-right: 20px;
vertical-align: top;
margin-top: 10px;
}
ul.address-top-menu li {
display: inline-block;
}
ul.address-top-menu li:after {
content: '|';
color: #fff;
}
ul.address-top-menu li:last-child:after {
content: ' ';
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet" />
<div class="top-contact-menu">
<h2>we are open:10am to 8pm</h2>
<ul class="address-top-menu">
<li><i class="fa fa-phone"></i>
</li>
<li><i class="fa fa-envelope-o"></i>
</li>
<li>
<i class="fa fa-facebook"></i>
<i class="fa fa-twitter"></i>
<i class="fa fa-instagram"></i>
<i class="fa fa-google-plus"></i>
</li>
</ul>
</div>
答案 1 :(得分:1)
使用float
来处理路线。查看.top-contact-menu
和ul.address-top-menu
.top-contact-menu {
background-color: #6aaf08;
width: 100%;
padding: 5px 0px;
display: inline-block;
}
.top-contact-menu h2 {
color: #fff;
font-size: 14px;
float: left;
}
ul.address-top-menu {
list-style: none;
float: right;
padding-right: 20px;
vertical-align: top;
margin-top: 10px;
}
ul.address-top-menu li {
display: inline-block;
}
ul.address-top-menu li:after {
content: '|';
color: #fff;
}
ul.address-top-menu li:last-child:after {
content: ' ';
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet" />
<div class="top-contact-menu">
<h2>we are open:10am to 8pm</h2>
<ul class="address-top-menu">
<li><i class="fa fa-phone"></i>
</li>
<li><i class="fa fa-envelope-o"></i>
</li>
<li>
<i class="fa fa-facebook"></i>
<i class="fa fa-twitter"></i>
<i class="fa fa-instagram"></i>
<i class="fa fa-google-plus"></i>
</li>
</ul>
</div>
答案 2 :(得分:1)
尝试这个..
+-------------------+--------------------+-----------------+--------------------+------------+-------------+
| type| s_uuid| p_uuid| created_date|created_year|created_month|
+-------------------+--------------------+-----------------+--------------------+------------+-------------+
| tained|6d688688-96a4-341...| null|2016-01-28 00:27:...| null| null|
| tained|6d688688-96a4-341...| null|2016-01-28 00:27:...| null| null|
| tained|6d688688-96a4-341...| null|2016-01-28 00:27:...| null| null|
答案 3 :(得分:0)
在类.top-contact-menu
上使用flexbox.top-contact-menu {
background-color: #6aaf08;
width: 100%;
padding: 5px 0px;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: space-around;
align-content: flex-start;
}
答案 4 :(得分:0)
试试这个:
.top-contact-menu:after{content:'';display:table;clear:both;}
.top-contact-menu h2{float:left;}
.address-top-menu{float:right;}