在文本框外面对齐文本的方框

我有这样

<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

在文本框外面对齐文本的方框

回答

相关问题