bootstrap 3.x不顯示內聯h4和圖標

我需要使用bootstrap 3.X列出帶圖標和描述的標題。但在行動<h4>和<i>不顯示在inline。bootstrap 3.x不顯示內聯h4和圖標

HTML：

<div class="mil-product"> 
    <ul> 
    <li> 
     <div class="title"><span class="so"><i class="fa fa-gift fa-2x"></i> <h4> Title of</h4></span></div> 
     <span class="desc"><i class="fa fa-check-square-o fa-lg"></i>Description Description Description Description </span> 
    </li> 
    <li> 
     <div class="title"><span class="so"><i class="fa fa-truck fa-2x"></i><h4> Title Of 2</h4></span></div> 
     <span class="desc"><i class="fa fa-check-square-o fa-lg"></i>Description Description Description Description</span> 
    </li> 
    <li> 
     <div class="title"><span class="so"><i class="fa fa-truck fa-2x"></i><h4> Title Of 3</h4></span></div> 
     <span class="desc"><i class="fa fa-check-square-o fa-lg"></i>Description Description Description Description</span> 
    </li> 
    </ul> 
</div>

CSS：

.mil-product > ul > li > div.title { 
    display: inline-block; 
    border-bottom: 3px solid #e1e1e1; 
    width: 100%; 
    position: relative; 
    top: 12px; 
    } 

    .mil-product > ul > li > div.title > .so { 
    color: #a0a0a0; 
    position: absolute; 
    top: -5px; 
    left: 10px; 
    background-color: #fff; 
    font-size: 12px; 
    padding: 0 5px; 
    width: auto; 
    } 

    .mil-product > ul > li > span.desc { 
    display: inline-block; 
    padding: 10px 0 0; 
    margin-top: 10px; 
    } 

    ul { 
    list-style-type: none; 
    }

DEMO Here

來源

2016-08-24 NewCod3r

h4是默認塊元素所以它會傾向於以新的方式下降。我們需要使它內聯

h4 { 
    display: inline-block; /* to make it inline */ 
    vertical-align: middle /* to align it vertically other values are top | bottom | baseline */ 
}

來源

2016-08-24 09:38:19 4dgaurav

將這個在你的CSS

h4 { 
    display: inline-block; 
}

來源

2016-08-24 09:36:52

h4有一個默認的「display：block」屬性。當您需要將任何其他內容與其相對的位置對齊時，您需要對其進行更改。

所以解決方法是在你的CSS添加這些行：

h4 { 
    display: inline-block; 
    }

護理，有時你需要添加「垂直對齊：上/中/什麼...」，使他們具有垂直取向。簡單:)

來源

2016-08-24 09:38:26

bootstrap 3.x不顯示內聯h4和圖標

回答

相關問題