如何在html css中顯示文字左側和右側的圖標？

Question

我必須在右側顯示文字左側和字體真棒圖標。現在我得到文本下方的所有字體真棒圖標。我認爲這可能非常簡單，但仍然，我不能得到它的工作。你會在這幫助我？

.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>

Answer 1

使用Float使用Flexbox的。它會幫助你將內容推到最右邊。

.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>

Answer 2

在類.TOP接觸菜單

.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; 
    } 

Answer 3

試試這個：

.top-contact-menu:after{content:'';display:table;clear:both;} 
.top-contact-menu h2{float:left;} 
.address-top-menu{float:right;} 

Answer 4

使用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>

Answer 5

嘗試這個..

.top-contact-menu h2 { 
    color: #fff; 
    font-size: 14px; 
    display: inline-block; 
} 


ul.address-top-menu { 
    list-style: none; 
    float: right; 
    display: inline-block; 
}