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>

來源

2017-03-01 Dylan

[在A標籤上設置寬度和高度]可能的重複（http://stackoverflow.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>

來源

2017-03-01 22:03:34 Johannes

如果我將它更改爲塊元素，「按鈕」（我知道它實際上並不是一個按鈕）會跳到左側零售區域的左上角，這會讓它坐在圖像的右上角？ – 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; 
}

來源

2017-03-01 21:56:05 TerraElise

如果我這樣做的按鈕跳轉到圖片的右上角旁邊，我的文字消失了？ – 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; 
}

來源

2017-03-01 21:57:11

如果我這樣做，按鈕跳轉到圖片右上角旁邊，我的文字消失了？ – Dylan

就讓它塊級元素加入display:bock它的風格。那麼你可以應用你想要的任何風格！原代碼複製到一個片段後

來源

2017-03-01 22:02:08 NDFA

HTML按鈕只使用按鈕中文字的寬度和高度

回答

相關問題