div之后的CSS文本

Question

.legend {
display: table;
width: 40px;
height: 40px;
border-radius: 10px/10px;

}

<div style="background: orange" class="legend"></div> New Order

http://jsfiddle.net/2tx1n99f/

我希望圆形框旁边出现“新订单”字样而不是显示下来。我如何实现这一目标？

Answer 1

将display属性值更改为inline-block即可。

.legend {
    display: inline-block;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background-color: orange;
    vertical-align: middle;/* Ensures that the text is vertically aligned in the middle */
}

<div class="legend"></div> New Order

Answer 2

使用

display: inline-table;

而不是

display: table;

＆＃13;

＆＃13;

.legend {
  display: inline-table;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: orange;
}

＆＃13;

<div class="legend"></div> New Order

＆＃13;

＆＃13;

＆＃13;

Answer 3

要显示框旁边的文字并为其指定正确的行高，您可以使用以下代码：

＆＃13;

＆＃13;

.legend-wrapper {
  line-height: 40px; /* Same as the height of the block */
}

.legend {
  display: block;
  float: left;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: orange;
  margin-right: 10px; /* Add some between text and block */
}

＆＃13;

<div class="legend-wrapper">
    <div class="legend"></div> New Order
</div>

＆＃13;

＆＃13;

＆＃13;