Question

下面的代码以html格式创建两个不同大小的按钮。如何使这些按钮大小相同？

<form>
<input type="button" value="btn"">
<input type="button" value="superLongButon"">
</form>

Answer 1

使用CSS控制页面上按钮的宽度。

至少有3种方法可以实现您的目标。

1.内联CSS：

<form>
    <input type="button" style="width:200px;" value="btn"">
    <input type="button" style="width:200px;" value="superLongButon"">
</form>

2.添加HTML类并为该类创建CSS规则：

<form>
    <input type="button" class="frmBtn" value="btn"">
    <input type="button" class="frmBtn" value="superLongButon"">
</form>

然后在CSS文件中添加：

.frmBtn {
    width:200px
}

3.仅限CSS（无需编辑您的HTML）：

form input[type='button'] {
    display:inline-block;
    width:200px; //or as wide as you want them to be
}

通常应尽可能避免使用外部样式表的一致性和性能优势。

Answer 2

您可以使用CSS flexbox来实现此行为。

检查以下示例：

＆＃13;

form {
  display: flex;
}
input,
button {
  flex: 1;
}

＆＃13;

<form>

  <button>small button</button>

  <button>this is the bigger button</button>

</form>

<form>

  <input type="button" value="small button">

  <input type="button" value="this is the bigger button">

</form>

＆＃13;

Answer 3

创建样式类并在两个按钮中使用它。

.clsButton {
  //Put your style declaration here
}

<form>
<input type="button" value="btn" class="clsButton">
<input type="button" value="superLongButon" class="clsButton">
</form>

Answer 4

我有类似的任务。在这种情况下，我建议为每个按钮计算文字字母，将大小乘以一定的宽度，然后将最大值用作宽度的内联值。

示例：

const buttonOne = "save" // 4
const buttonTwo = "save with notification" // 22
const maxLength = Math.max(buttonOne.length, buttonTwo.length)
const letterWidth = 5 // play with this value
const additionalWidth = 3; // play with it to find the value that suits your needs
const maxWidth = maxLength * letterWidth + additionalWidth;

// React
// I use 'ch' here, because 'ch' is width of 0 (in css)
<button style={{width: "${maxWidth}ch"}}>{{buttonOne}}</button>
<button style={{width: "${maxWidth}ch"}}>{{buttonTwo}}</button>

创建相同大小的按钮

4 个答案: