CSS 不延伸

Question

我有<ul>列表和<li>里面我有链接<a href="...">

我希望<li>不受内容的影响，并且具有固定的大小。

我的CSS

 ul.files {
    display: inline-block;
    padding: 0;
    margin: 0 auto;    
}

ul.files li {
    display: inline;

}


ul.files li a { 

    color: black;
    float: left;
    padding: 8px 15px;
    text-decoration: none;
    border: 1px solid #ddd;
    margin: 0 3px;
    background-color: #ffffff;
}

我的HTML

<ul class="files">
  <li>
    <a id="some_id" href="http">123</a>
  </li>
</ul>

Answer 1

为了能够将固定的width和height设置为<li>，你需要将display: inline;更改为inline-block

ul.files li {
    display: inline-block;
    width: 150px;
    height: 150px;
} 

以文字为中心

要使li的内容居中，您可以使用display: inline-flex

ul.files li {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 150px;
  height: 150px;
}