在文本框外面對齊文本的方框

我有這樣

<div class="red">Closed</div> 
<div class="yellow">Open</div> 
<div class="blue">Pending</div>

CSS代碼：

<style> 
#red{ 
width: 25px;height: 20px;background: red;display: inline-block; 
} 
#yellow{ 
width: 25px;height: 20px;background: red;display: inline-block; 
} 

#blue{ 
width: 25px;height: 20px;background: red;display: inline-block; 
} 
</style>

我得到的輸出繼電器是：

我的預期輸出是

我不希望我的文本出現在框中。我希望文本出現在方框的右側（外部）。

來源

2017-06-02 DPS

鏈接都死了，請重新更新 – Swellar

背景顏色分別爲紅，黃，藍，。在代碼中，所有div都被誤認爲是紅色。 – DPS

你正在談論哪個環節先生？ – DPS

你爲什麼想到文本外結了？

總之：

.box { 
 
    display: inline-block; 
 
    margin: 0 5px; 
 
} 
 

 
.box:before { 
 
    content: ""; 
 
    width: 45px; 
 
    height: 30px; 
 
    vertical-align: center; 
 
    margin: 0 4px -10%; 
 
    display: inline-block; 
 
} 
 

 
.red:before { 
 
    background-color: #E30021; 
 
} 
 

 
.yellow:before { 
 
    background-color: #FBC228; 
 
} 
 

 
.blue:before { 
 
    background-color: #2B9BE3; 
 
}

<div class="red box">Closed</div> 
 
<div class="yellow box">Open</div> 
 
<div class="blue box">Pending</div>

來源

2017-06-02 09:58:29

這很好，OP應該接受這 – Swellar

這工作完美。謝謝。 – DPS

感謝你們兩位！ –

在您的代碼中更改#到.，然後嘗試此操作。

.wrapper { 
 
    float: left; 
 
} 
 

 
.red { 
 
    width: 25px; 
 
    height: 20px; 
 
    background: red; 
 
    display: inline-block; 
 
} 
 

 
.yellow { 
 
    width: 25px; 
 
    height: 20px; 
 
    background: yellow; 
 
    display: inline-block; 
 
} 
 

 
.blue { 
 
    width: 25px; 
 
    height: 20px; 
 
    background: blue; 
 
    display: inline-block; 
 
}

<div class="wrapper"> 
 
    <div class="red"></div> 
 
    Closed 
 
    <div class="yellow"></div> 
 
    Open 
 
    <div class="blue"></div> 
 
    Pending 
 
</div>

來源

2017-06-02 09:56:37 Swellar

它的工作。非常感謝。 – DPS

試試這個，

#red { 
 
    width: 25px; 
 
    height: 20px; 
 
    background: red; 
 
    display: inline-block; 
 
} 
 

 
#yellow { 
 
    width: 25px; 
 
    height: 20px; 
 
    background: red; 
 
    display: inline-block; 
 
} 
 

 
#blue { 
 
    width: 25px; 
 
    height: 20px; 
 
    background: red; 
 
    display: inline-block; 
 
}

<div id="red"></div><span>Closed</span> 
 
<div id="yellow"></div><span>Open</span> 
 
<div id="blue"></div><span>Pending</span>

來源

2017-06-02 09:56:46

也許是這樣的：

/* BLOCK */ 
 
.block { 
 
    display: inline-block; 
 
} 
 
.block .content { 
 
    display: inline-block; 
 
    vertical-align: middle; 
 
} 
 

 
/* BOX */ 
 
.box { 
 
    display: inline-block; 
 
    vertical-align: middle; 
 
    width: 40px; 
 
    height: 40px; 
 
} 
 
.box-red { 
 
    background-color: red; 
 
} 
 
.box-green { 
 
    background-color: green; 
 
} 
 
.box-blue { 
 
    background-color: blue; 
 
}

<div class="block"> 
 
    <div class="box box-red"></div> 
 
    <div class="content">Text</div> 
 
</div> 
 

 
<div class="block"> 
 
    <div class="box box-green"></div> 
 
    <div class="content">Text</div> 
 
</div> 
 

 
<div class="block"> 
 
    <div class="box box-blue"></div> 
 
    <div class="content">Text</div> 
 
</div>

您需要使用display：inline-block的我f你想正確對齊div。

來源

2017-06-02 10:00:49 jacman

當您的文本位於背景色元素的內部時 - 我不確定您爲什麼認爲結果會有所不同。

.key { 
 
    display: inline-block; 
 
    margin-right: 10px; 
 
} 
 

 
.key span { 
 
    display: inline-block; 
 
    width: 25px; 
 
    height: 20px; 
 
    margin-right: 5px; 
 
    background: #000; 
 
} 
 

 
.red span { 
 
    background: red; 
 
} 
 

 
.yellow span { 
 
    background: yellow; 
 
} 
 

 
.blue span { 
 
    background: blue; 
 
}

<div class="key red"><span></span>Closed</div> 
 
<div class="key yellow"><span></span>Open</div> 
 
<div class="key blue"><span></span>Pending</div>

來源

2017-06-02 10:02:34 Tom

在文本框外面對齊文本的方框

回答

相關問題