HTML 按钮仅使用按钮中文本的宽度和高度答案

【问题标题】：HTML button only uses width and height of text in the buttonHTML 按钮仅使用按钮中文本的宽度和高度
【发布时间】：2017-07-21 10:22:51
【问题描述】：

我有一个小问题。我正在尝试更改按钮的宽度和高度，但由于某种原因，它不会让我这样做。按钮自动保持与包含的文本相同的宽度和高度。

CSS

.flexcontainer {
display: flex;
align-items: center;
overflow: hidden;
}

img[width="500"] {
border: 3px solid #5F5F5F;
border-radius:3px;
float: left;
}

#leftRetail {
display: block;
height:354px;
width: 1308px;
float:right;
text-align: center;
vertical-align: middle;
line-height: 354px;
}

.button {
width: 250px;
height: 200px;
background: #ed2626;
border-radius: 2px;
color: white;
font-weight: bold;
text-decoration:none;
}

HTML

<div class="flexcontainer">
            <div>
                <img src="anyImage.jpg" width="500" height="350"/>
            </div>
            <div id="leftRetail">
                <a href="Template.pdf" class= "button">Retail Menu</a>
            </div>
        </div>

【问题讨论】：

Setting a width and height on an A tag的可能重复

标签： html css

【解决方案1】：

将原始代码复制到 sn-p 后更改答案：

我刚刚意识到整个东西都在一个 flex 容器中，它使所有子元素自动成为 flex 项。（顺便说一句：float 参数在这种情况下无效）

因此，为.button 添加宽度和高度的一种方法是给它一些填充，如下所示：

.flexcontainer {
  display: flex;
  align-items: center;
  overflow: hidden;
}

img[width="500"] {
  border: 3px solid #5F5F5F;
  border-radius: 3px;
}

#leftRetail {
  height: 354px;
  width: 1308px;
  text-align: center;
  vertical-align: middle;
  line-height: 354px;
}

.button {
  background: #ed2626;
  border-radius: 2px;
  color: white;
  font-weight: bold;
  text-decoration: none;
  padding: 8px 12px;
}

<div class="flexcontainer">
  <div>
    <img src="anyImage.jpg" width="500" height="350" />
  </div>
  <div id="leftRetail">
    <a href="Template.pdf" class="button">Retail Menu</a>
  </div>
</div>

【讨论】：

如果我将其更改为块元素，“按钮”（我知道它实际上不是一个按钮）会跳到我左侧零售 div 的左上角，这使它坐到图片右上角？
抱歉，文字并没有消失，它只是白色的，所以我看不到它。文本保持在 div 的中心，但块移动到右上角
我有。那没有用。我需要块和文本都像以前一样居中，但也可以改变宽度和高度

【解决方案2】：

只需在其样式中添加display:bock 即可使其成为块级元素。然后你可以应用任何你想要的样式！

【讨论】：

【解决方案3】：

您不能手动修改inline 元素的宽度和高度。

将display: block;（或inline-block）添加到您的.button块中，您可以观察到高度和宽度的变化是您定义的。

只有block 元素可以专门设置其宽度和高度。

您的按钮现在应该如下所示：

.button {
width: 250px;
height: 200px;
background: #ed2626;
border-radius: 2px;
color: white;
font-weight: bold;
text-decoration:none;
display: block;
}

【讨论】：

如果我这样做，按钮会跳到图片右上角旁边，我的文字会消失？

【解决方案4】：

您需要更改 .button 以使用 display: block 或 inline-block:

.button {
display: block;
width: 250px;
height: 200px;
background: #ed2626;
border-radius: 2px;
color: white;
font-weight: bold;
text-decoration:none;
}

【讨论】：

如果我这样做，按钮会跳到图片右上角旁边，我的文字会消失？