Question

我正在使用jquery对单词jumble游戏中的字母进行排序。我需要显示列表项：内联和集中在它们的容器中。我也希望它们都具有相同的高度和宽度（70px x 70px），因此它们看起来像拼字游戏瓷砖。

然而，我可以获得相同高度和宽度的唯一方法是将它们向左漂浮。但那时并没有集中在容器中。如果我将它们显示为内嵌块并调整填充，它们中的大多数看起来像正方形但是像＃34; I＆＃34;不够宽，看起来不像是正方形。

这是我的HTML：

<div id="container">
<div class="letters">
<ul id="sortable">
<li class="ui-state-default">L</li>
<li class="ui-state-default">A</li>
<li class="ui-state-default">T</li>
</ul>
</div>

<div class="letters">
<ul id="sortable-2">
<li class="ui-state-default">K</li>
<li class="ui-state-default">I</li>
<li class="ui-state-default">H</li>
<li class="ui-state-default">T</li>
<li class="ui-state-default">G</li>
</ul>
</div>

<div style="clear:both;"> </div>

</div>

Here's a link to my fiddle

感谢您的帮助;我认为这很简单，但我无法弄明白。

Answer 1

使用display: inline-block并为它们提供70px的宽度和高度。您可以移除填充，因为它们将在line-height框中垂直居中，并以text-align: center水平居中。

更新小提琴： http://jsfiddle.net/mymrbzvg/

#sortable li, #sortable-2 li  { 
  margin: 3px 3px 3px 0; 
  display:inline-block;
  height: 70px;
  color:#fff;
  background-color:#333;
  font-size: 36px; 
  line-height:70px;
  vertical-align:middle;
  text-align: center;
  width: 70px;
  }

Answer 2

您遇到的问题是填充会增加总宽度和高度。

由于在10px的每个字母块上都有左右填充，因此在定义特定宽度时，将为总宽度添加额外的20px。

只需移除填充，指定宽度和高度，块就会显示为正方形。

#sortable li, #sortable-2 li  { 
    margin: 3px 3px 3px 0; 
    padding: 0; 
    display: inline-block;
    height: 70px;
    color:#fff;
    background-color:#333;
    font-size: 36px; 
    line-height: 70px;
    vertical-align:middle;
    text-align: center;
    width: 70px;
}

http://jsfiddle.net/h3s3a8jq/2/

如果您坚持使用填充值但不希望填充添加到元素的总宽度，则可以使用 box-sizing 属性更改其行为方式。

#sortable li, #sortable-2 li  { 
   -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
   -moz-box-sizing: border-box;    /* Firefox, other Gecko */
    box-sizing: border-box;        /* Opera/IE 8+ */
}

请注意支持box-sizing isn't fully supported by several browsers，因此请务必在实施前检查其是否符合您的需求：http://caniuse.com/#feat=css3-boxsizing

中心对齐<li>，高度和宽度相同</li>

2 个答案: