在同一行中對齊圖像和文本

Question

我想在同一行中顯示圖像和文本“報價”。 div是在drupal中生成的。 在源頁面代碼中顯示如下。

默認情況下，我有兩個圖像，懸停圖像不顯示任何內容，菜單圖像出現在懸停之前。 現在顯示在兩行上。 需要顯示在一行中。

 .categoryMobileMenu { // display:none; } .categoryMenu { background-color: #663399; min-height: 110px; font size: 18px; color: #fff; text-align: center; } #sub_menu { position: absolute; left: 0; right: 0; bottom: 0; } .categoryMenu li { list-style-type: none; } .menu-hover-image { display: none; } .categoryMenu a { color: #fff; font size: 12px; } .categoryMobileMenu li { list-style-type: none; } p { display: inline; } .menu-image { display: inline; } .field-content a { display: inline; } 

 <div class=" col-sm-4 col-md-4 categoryMobileMenu"> <a href="Offerings"> </a> <li> <a href="Offerings"> <div class="menu-image"> <div class="field-content"><img typeof="foaf:Image" src="http://localhost/Website/sites/default/files/offering-icon.png" width="55" height="47" alt=""></div> </div> <div class="menu-hover-image"> <div class="field-content"><img typeof="foaf:Image" src="http://localhost/Website/sites/default/files/offering-icon-hover.png" width="55" height="47" alt=""></div> </div> <p></p> </a> <div class="field-content"> <a href="Offerings"></a><a href="http://localhost/Website/services/dpcm/Offerings">Offerings</a></div> <p></p> </li> </div> 

Answer 1

盡管li無效，但申請

display: flex;
align-items: center;

它將解決問題。

 .categoryMobileMenu { // display:none; } .categoryMenu { background-color: #663399; min-height: 110px; font size: 18px; color: #fff; text-align: center; } #sub_menu { position: absolute; left: 0; right: 0; bottom: 0; } .categoryMenu li { list-style-type: none; } .menu-hover-image { display: none; } .categoryMenu a { color: #fff; font size: 12px; } .categoryMobileMenu li { list-style-type: none; display: flex; align-items: center; } p { display: inline; } .menu-image { display: inline; } .field-content a { display: inline; } 

 <div class=" col-sm-4 col-md-4 categoryMobileMenu"> <a href="Offerings"> </a> <li> <a href="Offerings"> <div class="menu-image"> <div class="field-content"><img typeof="foaf:Image" src="http://localhost/Website/sites/default/files/offering-icon.png" width="55" height="47" alt=""></div> </div> <div class="menu-hover-image"> <div class="field-content"><img typeof="foaf:Image" src="http://localhost/Website/sites/default/files/offering-icon-hover.png" width="55" height="47" alt=""></div> </div> <p></p> </a> <div class="field-content"> <a href="Offerings"></a><a href="http://localhost/Website/services/dpcm/Offerings">Offerings</a></div> <p></p> </li> </div> 

如果將li替換為div，它仍然可以完成工作

 .categoryMobileMenu { // display:none; } .categoryMenu { background-color: #663399; min-height: 110px; font size: 18px; color: #fff; text-align: center; } #sub_menu { position: absolute; left: 0; right: 0; bottom: 0; } .categoryMenu { list-style-type: none; } .menu-hover-image { display: none; } .categoryMenu a { color: #fff; font size: 12px; } .container { list-style-type: none; display: flex; align-items: center; } p { display: inline; } .menu-image { display: inline; } .field-content a { display: inline; } 

 <div class=" col-sm-4 col-md-4 categoryMobileMenu"> <a href="Offerings"> </a> <div class="container"> <a href="Offerings"> <div class="menu-image"> <div class="field-content"><img typeof="foaf:Image" src="http://localhost/Website/sites/default/files/offering-icon.png" width="55" height="47" alt=""></div> </div> <div class="menu-hover-image"> <div class="field-content"><img typeof="foaf:Image" src="http://localhost/Website/sites/default/files/offering-icon-hover.png" width="55" height="47" alt=""></div> </div> <p></p> </a> <div class="field-content"> <a href="Offerings"></a><a href="http://localhost/Website/services/dpcm/Offerings">Offerings</a></div> <p></p> </div> </div> 

Answer 2

添加

.field-content {
  display: inline-block;
}

 .categoryMobileMenu { // display:none; } .categoryMenu { background-color: #663399; min-height: 110px; font size: 18px; color: #fff; text-align: center; } #sub_menu { position: absolute; left: 0; right: 0; bottom: 0; } .categoryMenu li { list-style-type: none; } .menu-hover-image { display: none; } .categoryMenu a { color: #fff; font size: 12px; } .categoryMobileMenu li { list-style-type: none; } p { display: inline; } .menu-image { display: inline; } .field-content a { display: inline; } .field-content { display: inline-block; } 

 <div class=" col-sm-4 col-md-4 categoryMobileMenu"> <a href="Offerings"> </a> <li> <a href="Offerings"> <div class="menu-image"> <div class="field-content"><img typeof="foaf:Image" src="http://localhost/Website/sites/default/files/offering-icon.png" width="55" height="47" alt=""></div> </div> <div class="menu-hover-image"> <div class="field-content"><img typeof="foaf:Image" src="http://localhost/Website/sites/default/files/offering-icon-hover.png" width="55" height="47" alt=""></div> </div> <p></p> </a> <div class="field-content"> <a href="Offerings"></a><a href="http://localhost/Website/services/dpcm/Offerings">Offerings</a></div> <p></p> </li> </div> 

Answer 3

這是一個簡單的解決方案，涉及將圖像float到左側，以便所有內容都在同一行上。

 .categoryMobileMenu { // display:none; } .categoryMenu { background-color: #663399; min-height: 110px; font size: 18px; color: #fff; text-align: center; } #sub_menu { position: absolute; left: 0; right: 0; bottom: 0; } .categoryMenu li { list-style-type: none; } .menu-hover-image { display: none; } .categoryMenu a { color: #fff; font size: 12px; } .categoryMobileMenu li { list-style-type: none; } p { display: inline; } .menu-image { display: inline; } .field-content a { display: inline; } .menu-image { float:left; } 

 <div class=" col-sm-4 col-md-4 categoryMobileMenu"> <a href="Offerings"> </a> <li> <a href="Offerings"> <div class="menu-image"> <div class="field-content"><img typeof="foaf:Image" src="http://localhost/Website/sites/default/files/offering-icon.png" width="55" height="47" alt=""></div> </div> <div class="menu-hover-image"> <div class="field-content"><img typeof="foaf:Image" src="http://localhost/Website/sites/default/files/offering-icon-hover.png" width="55" height="47" alt=""></div> </div> <p></p> </a> <div class="field-content"> <a href="Offerings"></a><a href="http://localhost/Website/services/dpcm/Offerings">Offerings</a></div> <p></p> </li> </div> 

Answer 4

請檢查一下。

 .categoryMobileMenu{ // display:none; } .categoryMenu{ background-color:#663399; min-height: 110px; font size : 18px; color : #fff; text-align:center; } #sub_menu{ position:absolute; left: 0; right: 0; bottom: 0; } .categoryMenu li{ list-style-type: none; } .menu-hover-image{ display:none; } .categoryMenu a { color:#fff; font size : 12px; } .categoryMobileMenu li{ list-style-type: none; } p{ display:inline; } .menu-image{ display:inline; } .field-content a{ display:inline; } .offering-section{ float: left; } 

 <div class=" col-sm-4 col-md-4 categoryMobileMenu"> <a href="Offerings" > </a><li><a href="Offerings" class="offering-section"> <div class="menu-image"><div class="field-content"><img typeof="foaf:Image" src="http://localhost/Website/sites/default/files/offering-icon.png" width="55" height="47" alt=""></div></div> <div class="menu-hover-image"><div class="field-content"><img typeof="foaf:Image" src="http://localhost/Website/sites/default/files/offering-icon-hover.png" width="55" height="47" alt=""></div></div> <p></p></a><div class="field-content"><a href="Offerings"></a><a href="http://localhost/Website/services/dpcm/Offerings">Offerings</a></div><p></p> </li> </div> 

Answer 5

只是更新

.field-content a {
    display:inline;
  } 

至

.field-content {
    display:inline;
    float:left;
  } 

檢查一下

 <style>.categoryMobileMenu{ // display:none; } .categoryMenu{ background-color:#663399; min-height: 110px; font size : 18px; color : #fff; text-align:center; } #sub_menu{ position:absolute; left: 0; right: 0; bottom: 0; } .categoryMenu li{ list-style-type: none; } .menu-hover-image{ display:none; } .categoryMenu a { color:#fff; font size : 12px; } .categoryMobileMenu li{ list-style-type: none; } p{ display:inline; } .menu-image{ display:inline; } .field-content { display:inline; float:left; } </style> <div class=" col-sm-4 col-md-4 categoryMobileMenu"> <a href="Offerings"></a><li><a href="Offerings"> <div class="menu-image"><div class="field-content"><img typeof="foaf:Image" src="http://localhost/Website/sites/default/files/offering-icon.png" width="55" height="47" alt=""></div></div> <div class="menu-hover-image"><div class="field-content"><img typeof="foaf:Image" src="http://localhost/Website/sites/default/files/offering-icon-hover.png" width="55" height="47" alt=""></div></div> <p></p></a><div class="field-content"><a href="Offerings"></a><a href="http://localhost/Website/services/dpcm/Offerings">Offerings</a></div><p></p> </li> </div> 

希望它對您有用！