色婷婷狠狠18禁久久YY,CHINESE性内射高清国产,国产女人18毛片水真多1,国产AV在线观看

由于文本內容[重復]，div中的按鈕呈現不同

CSS
傅智翔2年前7瀏覽0評論

我有四個100像素* 100像素大小的按鈕在一個分區。但是，根據文本內容的不同，它們的位置也不同。

這是html:

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Memo demo</title>
  <style>
    button {
      height: 100px;
      width: 100px;
    }
  </style>
</head>
<body>
  <div id="buttonHolder">
    <button type="button" >X</button>
    <button type="button" ></button>
    <button type="button" >X</button>
    <button type="button" >X</button>
  </div>
</body>
</html>

默認情況下，按鈕沿其最后一行文本對齊(“基線”，與內聯塊元素相同)。如果沒有文本，則使用底部邊框，這發生在您的代碼片段中。要改變這種情況，您可以使用垂直對齊，頂部、底部或中間，只要最適合您的特定情況:

button {
  vertical-align: top;
}

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <title>Memo demo</title>
  <style>
    button {
      height: 100px;
      width: 100px;
    }
  </style>
</head>

<body>
  <div id="buttonHolder">
    <button type="button">X</button>
    <button type="button"></button>
    <button type="button">X</button>
    <button type="button">X</button>
  </div>
</body>

</html>

您可以添加& ampnbsp為了一小塊空白。

運籌學

可以使用vertical-align:middle；

button {
  height: 100px;
  width: 100px;
  vertical-align: middle;
}

<div id="buttonHolder">
  <button type="button" >X</button>
  <button type="button" >&nbsp;</button>
  <button type="button" >X</button>
  <button type="button" >X</button>
</div>

你應該嘗試使用一個浮動屬性來對齊按鈕。

這里有一個浮動的例子:左；

button {
  height: 100px;
  width: 100px;
  float: left;
}

<div id="buttonHolder">
  <button type="button" >X</button>
  <button type="button" ></button>
  <button type="button" >X</button>
  <button type="button" >X</button>
</div>

您可以在#buttonHolder上使用display: flex。它在火狐和Chrome上對我有效。

#buttonHolder {
  display: flex
}
button {
  height: 100px;
  width: 100px;
}

<div id="buttonHolder">
  <button type="button" >X</button>
  <button type="button" ></button>
  <button type="button" >X</button>
  <button type="button" >X</button>
</div>