HTMLボタンは、ボタン内のテキストの幅と高さのみを使用します。

Question

小さな問題があります。私はボタンの幅と高さを変更しようとしていますが、何らかの理由でそれができません。ボタンは自動的に含まれているテキストと同じ幅と高さのままです。あなたは、ディスプレイを使用するように.buttonを変更する必要が

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

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>

Answer 2

：ブロックまたはインラインブロック：

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

Answer 3

あなたが幅を変更することはできませんし、高さはinlineです。

.buttonブロックにdisplay: block;（またはinline-block）を追加すると、高さと幅の変更が定義されていることがわかります。

要素block要素の幅と高さが特に設定されている可能性があります。ただ、それにそのスタイルにdisplay:bockを追加することにより、ブロックレベル要素作る

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

Answer 4

：

あなたのボタンが今のようになります。それからあなたはどんなスタイルでもあなたを応援することができます！スニペットに元のコードをコピーした後