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

Question

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

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>

Answer 1

您需要更改您的 .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;
}