Question

我有一些按钮应该看起来都一样。

1包含单词“Anmäl”，另一个包含“信息”。这导致按钮的单词越长越大，我不希望这样！

即使单词长度不同，我希望按钮看起来一样。

我正在使用填充来使它们更大，我尝试了“宽度”但它不起作用。

任何帮助表示赞赏！

CSS：

.startLink {
  padding: 20px;
  padding-left: 90px;
  padding-right: 90px;
  color: white;
  background: #8d68dc;
  border-radius: 5px;
  font-size: 16px;
  box-shadow: 0px 5px 10px #000;
  webkit-transition: all 200ms ease-in;
  -moz-transition: all 200ms ease-in;
  -o-transition: all 200ms ease-in;
  -ms-transition: all 200ms ease-in;
  transition: all 200ms ease-in;;
}

HTML：

<a href="index.php?anmal" class="startLink">Anmäl</a>

<a href="index.php?info" class="startLink">Information</a>

Answer 1

width是答案，但它不适合您，因为这些链接当前是内联元素，无法接收显式宽度。

为inline-block属性提供block或display，然后您可以使用width。

至于它们具有相同的宽度，只是宽松的宽度，舒适地容纳两者。例如，在这里，您可以将段落中的按钮置于中心位置，每个段落具有相同的宽度。

HTML

<p id='btns'>
    <a href="index.php?anmal" class="startLink">Anmäl</a>
    <a href="index.php?info" class="startLink">Information</a>
</p>

CSS

#btns { text-align: center; }
.startLink {
    display: inline-block;
    margin: 0 .65rem;
    background: red;
    padding: 1em;
    min-width: 200px;
}

最好使用min-width而不是width，以防万一按钮文本（在真实场景中，可能来自数据库或其他动态来源）长于按钮的宽度允许，它会安全地扩展以适应它（即使这意味着你的按钮不再是相同的宽度。）

Answer 2

使用＆＃34; text-align：center＆＃34;而不是左边填充和右边填充＆＃34; min-width＆＃34; 和＆＃34;显示：内联块＆＃34;

CSS textize＆amp;填充

2 个答案: