HTML按钮只使用按钮中文字的宽度和高度

问题描述：

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

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>

[在A标签上设置宽度和高度]可能的重复（http://*.com/questions/4743254/setting-a-width-and-height-on-an-a-tag） – litel

答

CHANGED答：

我才意识到，整个事情是一个柔性的容器，这使得自动所有子元素柔性里面的物品。（顺便说一句：本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>

如果我将它更改为块元素，“按钮”（我知道它实际上并不是一个按钮）会跳到左侧零售区域的左上角，这会让它坐在图像的右上角？ – Dylan

道歉，文字并没有消失，它只是白色，所以我看不到它。文本停留在div的中心，但块移动到右上角 – Dylan

我有。那没用。我需要块和文本都像以前一样居中，但是也可以改变宽度和高度 – Dylan

答

你需要改变你的.button使用显示：块或inline-block的：

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

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

答

您不能修改宽度和手动高度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; 
}

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

答

就让它块级元素加入display:bock它的风格。那么你可以应用你想要的任何风格！原代码复制到一个片段后

HTML按钮只使用按钮中文字的宽度和高度

相关推荐