HTML按钮仅使用按钮

时间:2017-03-01 21:51:17

标签: html css html5 css3

我有一个小问题。我试图改变按钮的宽度和高度,但由于某种原因,它不会让我。该按钮自动保持与包含文本相同的宽度和高度。

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>

4 个答案:

答案 0 :(得分:2)

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

答案 1 :(得分:1)

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

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

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

&#13;
&#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;
&#13;
&#13;

答案 2 :(得分:0)

您无法手动修改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;
}

答案 3 :(得分:0)

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

相关问题