顯示<hr>標籤與字體真棒圖標和文字一起內嵌與響應行爲

我想在一行中顯示<div>標記中的三個不同元素，並具有完整的響應行爲。三個要素是（i）：font-awesome圖標用戶，（ii）：標籤文本和（iii）：hr標籤。我正在使用bootstrap。顯示<hr>標籤與字體真棒圖標和文字一起內嵌與響應行爲

這裏是我的HTML，

<div class="panel-collapse collapse" role="tabpanel"> 
    <div class="panel-body"> 
     <form class="form"> 
      <div class="row traveller-divider"> 
       <div class="inline-block"> 
        <span class="fa fa-user"></span> 
        <label>Traveller</label> 
       </div> 
       <hr> 
      </div> 
     </form> 
    </div> 
</div>

我曾嘗試與CSS的東西，但它不工作。任何幫助都會很棒。謝謝。

來源

2016-11-15 harsh

什麼是'完全響應行爲'？ – LuudJacobs

@LuudJacobs：包含三個元素的完整系列應保留在標籤和移動設備中的一行。這意味着hr標籤必須根據設備改變其寬度。 – harsh

使用CSS定位。使.traveller-divider - 相對&使hr - 絕對。

看一看摘錄如下以更好地理解：

.traveller-divider { 
 
    position: relative; 
 
} 
 

 
.inline-block { 
 
    display: inline-block; 
 
    padding: 5px 10px; 
 
    background: white; 
 
    position: relative; 
 
    z-index: 2; 
 
} 
 

 
hr { 
 
    position: absolute; 
 
    top: 50%; 
 
    left: 0; 
 
    transform: translateY(-50%); 
 
    width: 100%; 
 
    margin: 0; 
 
    z-index: 1; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/> 
 

 
<div class="panel-collapse collapse" role="tabpanel"> 
 
    <div class="panel-body"> 
 
     <form class="form"> 
 
      <div class="row traveller-divider"> 
 
       <div class="inline-block"> 
 
        <span class="fa fa-user"></span> 
 
        <label>Traveller</label> 
 
       </div> 
 
       <hr> 
 
      </div> 
 
     </form> 
 
    </div> 
 
</div>

希望這有助於！

來源

2016-11-15 14:31:18

首先感謝你的回答，我寫了相同的CSS，並修改了我的HTML結構，但是水平線沒有出現，是因爲嵌套的HTML結構嗎？請檢查更新後的HTML結構問題。 – harsh

@harsh您缺少'.traveller-divider {position：relative; }'。我已經用更新後的HTML更新了我的答案，請看看並告訴我這是否有幫助？ –

我做了同樣的事情，但它仍然沒有顯示出水平線。當我檢查元素

時，它是在這兩個元素的後面。當我刪除屬性位置：絕對然後它出現在兩個元素下:(... :)： – harsh

<div class="row divider"> 
    <label>User <span class="fa fa-user"></span></label> 
    <hr> 
</div>

不知道這是你想要達到的目標嗎？

來源

2016-11-15 14:27:13 Rixcy

不，使用此代碼hr標籤會自動顯示爲新行。我不想那樣。我希望所有三個元素合而爲一。並且字體真棒圖標必須出現在用戶標籤之前。 – harsh

如果您希望hr位於圖標和標籤的旁邊，您需要將其放置在相對位置併爲圖標和標籤指定背景顏色（與包含div相同的顏色）。否則，你必須使用float來定位hr，並給它一個定義的寬度，這將不會響應。

鑑於你的HTML，這是我會怎麼做：

.fa, label { 
    display: block; 
    background: #fff; 
    float: left; 
} 

hr {position: relative; top: -0.5em; z-index: -1; clear: both; }

你不得不調整人力資源的top位置以適應所要的東西。

這裏有一個工作筆：http://codepen.io/vic3685/pen/GNqeQQ

來源

2016-11-15 14:30:00

感謝您的快速回答。在codepen中，它正在以我想要的方式正常工作。但我已將相同的CSS規則應用到我的HTML中，然後hr標記未顯示水平線。是因爲我有嵌套的HTML結構嗎？請檢查我更新的HTML結構。 – harsh

隨着更新的結構，它仍然在codepen中工作。什麼是你的CSS？添加位置：相對於.traveller-divider是一種選擇，但沒有看到其餘的CSS，這只是一個猜測。 –

這裏是我的CSS：.traveller-divider {position：relative; margin-bottom：10px; .fa，label { display：block; background：#fff; float：left; 填充：0 5px 0 0; } hr { position：relative; top：-0。5em的; z-index：-1; 明確：均; } }我認爲問題是嵌套的CSS。我在travellers divider類中應用.fa，label和hr規則。（ – harsh

顯示<hr>標籤與字體真棒圖標和文字一起內嵌與響應行爲

回答

相關問題