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;
}

Answer 2

将原始代码复制到代码段后更改了答案：

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

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

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

Answer 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;
}

Answer 4

通过在其样式中添加display:bock，将其设为块级元素。然后你可以应用你想要的任何风格！

HTML按钮仅使用按钮

4 个答案: