}

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

http://jsfiddle.net/2tx1n99f/

我希望文本“新訂單”出現在圓形框旁邊，而不是向下顯示。我如何實現這一點？

將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

要在框旁邊顯示文本并賦予其適當的行高，可以使用下面的代碼:

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

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

使用

display: inline-table;

代替

display: table;

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

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

你可以把你的文本放入一個span標簽中，只給span標簽一個行高屬性。圖例框

新秩序