Question

我在css样式中面临一个问题。我期待一个3个方框的文字应该出现在盒子外面（右侧）。

我有这样的代码

<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>

我得到的输出是：

我的预期输出是

我不希望我的文字显示在框内。我希望文本显示在框的右侧（外部）。

Answer 1

为什么你希望文本最终在外面？

反正：

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

Answer 2

当你的文字在里面有背景颜色的元素里面时 - 我不确定为什么你认为结果会有所不同。

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

Answer 3

在代码中将#更改为.，然后尝试此操作。

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

Answer 4

也许是这样的：

＆＃13;

/* 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;
}

＆＃13;

<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>

＆＃13;

如果要正确对齐div，则需要使用display：inline-block。

Answer 5

试试这个，

＆＃13;

#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;
}

＆＃13;

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

＆＃13;

方形框与文本在框外对齐

5 个答案: