如何將標籤字段

Question

<div class="titelcontent"> 
<div class="name">Name</div> 
<div class="hzline"></div> 
</div> 

之後創建的div靈活的引出線我想name股利和股利hzline自動在titelcontent適合100％。

標籤（例如，名稱）的長度會有所不同，我希望紅色下劃線跨越titlecontent div的剩餘空間。

如何實現以下目標？使用表格很容易做到這一點，但我不知道如何通過span或div來做到這一點。

Answer 1

更新，允許背景圖片顯示通過

您可以通過使用一個僞元素使加價有點更緊如下：

<div class="wrapper"> 
    <div class="inner">Photoshop</div> 
</div> 

，並使用以下CSS造型：

div.wrapper { 
    color:#82439a; 
    font-size: 16px; 
    font-weight: bold; 
    font-family: tahoma; 
    line-height: 180%; 
    background: red url(http://placekitten.com/1000/500) no-repeat left top; 
    overflow: hidden; 
} 

div.inner { 
    position: relative; 
    display: inner; 
    color: yellow; 
    padding-right: 0.50em; 
    border: 1px dotted yellow; 
} 

div.inner:after { 
    content: "\A0"; 
    position: absolute; 
    bottom: 0; 
    left: 100%; 
    border-bottom: 5px solid #d71d00;  
    width: 1000%; 
} 

演示小提琴：http://jsfiddle.net/audetwebdesign/wE8bC/

如何工作

父元素div.wrapper可以含有的背景圖像或是透明的並且顯示出一些祖先元素的背景。您需要設置overflow: hidden。

對於標籤（<div.inner>），請設置position: relative，然後生成一個帶底邊的100％寬度僞元素作爲下劃線。使用絕對定位將div.inner:after置於<div.inner>（left: 100%）的右側，並使寬度相對較大。僞元素將觸發溢出條件，但這是通過隱藏父元素中的溢出來處理的。您可以使用填充控制左/右間距。

您可以使用將display屬性設置爲inline或inline-block。如果您使用display: inline，它將在IE7中工作;根據造型需要調整線條高度。

請注意，生成的內容是一個非中斷空格，十六進制代碼「\ A0」。

支持IE7

如果您需要支持IE7，您將需要一個黑客如果你使用inline-block如在前面的問題討論：IE7 does not understand display: inline-block

IE7也不支持table-cell等等一些其他發佈的解決方案將面臨同樣的限制。

Answer 2

您可以通過使用table-cell使用div像table。

.titlecontent { 
    display: table; 
} 
.name { 
    display: table-cell; 
    white-space: nowrap; 
} 
.hzline { 
    display: table-cell; 
    border-bottom: 3px solid red; 
    width: 100%; 
} 

參見DEMO。

Answer 3

或者使用display: table替代：

.name { 
    float: left; 
} 
.line-wrapper { 
    display: block; 
    overflow: hidden; 
    padding-top: 6px; 
} 
.hzline { 
    border-bottom: 3px solid red; 
    width: 100%; 
} 

見example。

Answer 4

我猜你看起來像this。根據我對您發佈的圖片的理解，找到我的解決方案。

HTML

<div> 
    <span>Photoshop</span> 
</div> 
<div> 
    <span>Adobe Illustrator</span> 
</div> 
<div> 
    <span>3D Max</span> 
</div> 
<div> 
    <span>Maya</span> 
</div> 
<div> 
    <span>Windows 8 Pro</span> 
</div> 

CSS

div { 
    line-height: 150%; 
    border-bottom: 5px solid #d71d00; 
} 

div span{ 
    position:relative; 
    bottom: -10px; 
    background:#fff; 
    padding: 0 5px; 
    color:#82439a; 
    font-size: 16px; 
    font-weight: bold; 
    font-family: tahoma; 
} 

請不要讓我知道您的反饋意見。由於