div標籤在一行中與裝飾下劃線

我想設置三個div標籤在一行中，並由一些空格和不同的下劃線顏色分隔。讓事情變得更容易，這就是我想要做的事情：div標籤在一行中與裝飾下劃線

看到張貼在技術和分享和鳴叫。這就是我想要做的。我看到了他們的源代碼，並試圖模仿。但失敗了。你能幫我麼？

<div class="source"> 
    <a href="#"><h3>source</h3></a> 
</div> 
<div class="share"> 
    <h3>share</h3> 
</div> 
<div class="share"> 
    <h3>tweet</he> 
</div>

來源

2016-03-08 winixxee

添加CSS這樣的份額{下邊框：1px的固體紅;} –

請刪除內聯樣式和樣式表中添加類：

<div style="float:left; border-bottom:2px solid #1D1D1B; width:48%; margin-right:2%"><a href="#">POSTED IN TECH</a> 
</div> 
<div style="float:left; border-bottom:2px solid #FB473A; width:23%; margin-right:2%;">SHARE 
</div> 
<div style="float:left; border-bottom:2px solid #FB473A; width:23%; margin-right:2%;">TWEET 
</div>

來源

2016-03-08 11:45:34 Sinto

非常感謝你，這個偉大的工程。但唯一的問題是它需要上下之間的差距，現在我的看起來是這樣的; http：//imgur.com/n7uNlT9...我試過margin-top和bottom0m：2％;但它弄糟了整個事情 – winixxee

div 
 
{ 
 
    display:inline-block; 
 
    } 
 
.source 
 
{ 
 
    border-bottom:1px solid #000; 
 
    } 
 
.share 
 
{ 
 
    border-bottom:1px solid red; 
 
    }

<div class="source"> 
 
    <a href="#"><h3>Lorem ipsum dolor sit amet, consectetur adipiscing</h3></a> 
 
</div> 
 
<div class="share"> 
 
    <h3>share</h3> 
 
</div> 
 
<div class="share"> 
 
    <h3>tweet</he> 
 
</div>

來源

2016-03-08 11:50:24

爲了你有什麼在你的屏幕截圖，保存HTML不管你已經爲他們發佈和寫入CSS如下。（改變顏色和寬度爲您喜歡）

.source {border-bottom:2px solid #000; width:48%; padding-bottom:10px; margin-right:2%} 
.share {border-bottom:2px solid #d90000; width:23%; padding-bottom:10px; margin-right:2%} 
.share:nth-child(2) {margin-right:0}

問候

馬諾瑞裏

來源

2016-03-08 11:54:29

使用display:flexbox;到中心項目在同一行中，border-bottom拿到顏色的線，併爲margin-right間距。

.source, .share{ 
 
    font-family:sans-serif; 
 
    width:100%; 
 
    margin-right:5px; 
 
} 
 
.source a{ 
 
    text-decoration:none; 
 
    color:black; 
 
} 
 
.source h3,.share h3{ 
 
    margin-bottom:5px; 
 
} 
 
.share{ 
 
    border-bottom:2px solid red; 
 
} 
 
.source{ 
 
    border-bottom:2px solid gray; 
 
} 
 
.flex{ 
 
    display:flex; 
 
    width:100%; 
 
    -webkit-justify-content: center; 
 
    justify-content: center; 
 
}

<div class="flex"> 
 
<div class="source"> 
 
    <a href="#"><h3>source</h3></a> 
 
</div> 
 
<div class="share"> 
 
    <h3>share</h3> 
 
</div> 
 
<div class="share"> 
 
    <h3>tweet</he> 
 
</div> 
 
</div>

來源

2016-03-08 11:58:17 Wowsk

div標籤在一行中與裝飾下劃線

回答

相關問題