添加文字笨拙地改變按鈕的大小？

在下面的代碼中，將鼠標懸停在綠色按鈕上時，會出現藍色條。添加文字笨拙地改變按鈕的大小？

但是當我在about_button div（即綠色按鈕）上寫下「關於我」時，按鈕的形狀會發生變化。

如何在不損壞按鈕形狀的情況下成功在綠色按鈕上書寫「關於我」？

body { 
 
    margin: 0; 
 
    width: 100%; 
 
} 
 
p { 
 
    padding: 0 10px; 
 
} 
 
#page1 { 
 
    position: relative; 
 
    width: 100%; 
 
    height: 100%; 
 
    background-color: #77d47f; 
 
} 
 
#about { 
 
    position: absolute; 
 
    left: 5%; 
 
    width: 504px; 
 
    height: 100px; 
 
    overflow: hidden; 
 
} 
 
#about_button { 
 
    width: 100px; 
 
    height: 100px; 
 
    background-color: green; 
 
    display: inline-block; 
 
    position: relative; 
 
    z-index: 1; 
 
} 
 
#about_text { 
 
    transition: transform 0.5s; 
 
    height: 100px; 
 
    width: 400px; 
 
    background-color: blue; 
 
    display: inline-block; 
 
    transform-origin: 0 0; 
 
    transform: translateX(-450px); 
 
    overflow: hidden; 
 
} 
 
#about { 
 
    top: 10%; 
 
} 
 
#about_button:hover + #about_text { 
 
    transform: translateX(-4px); 
 
}

<div id="page1"> 
 
    <div id="about"> 
 
    <div id="about_button"></div> 
 
    <div id="about_text"> 
 
     <p>Hi, I am a Computer Science student. I am interested in designing</p> 
 
    </div> 
 
    </div> 
 
</div>

來源

2016-05-23 Dhruv Chadha

我沒有看到的形狀該添加或刪除文字「關於我」時綠色正方形發生變化。 –

你有按鈕上的屬性display:inline-block，這迫使圍繞它裏面的內容的形狀包裹。將其更改爲display:block。

來源

2016-05-23 15:45:20

它不會工作這個 – dippas

添加vertical-align:top它，因爲inline-block在默認情況下對#about_buttonvertical-align:baseline

body { 
 
    margin: 0; 
 
    width: 100%; 
 
} 
 
p { 
 
    padding: 0 10px; 
 
} 
 
#page1 { 
 
    position: relative; 
 
    width: 100%; 
 
    height: 100%; 
 
    background-color: #77d47f; 
 
} 
 
#about { 
 
    position: absolute; 
 
    left: 5%; 
 
    width: 504px; 
 
    height: 100px; 
 
    overflow: hidden; 
 
} 
 
#about_button { 
 
    width: 100px; 
 
    height: 100px; 
 
    background-color: green; 
 
    display: inline-block; 
 
    vertical-align:top; /** THIS LINE */ 
 
    position: relative; 
 
    z-index: 1; 
 
} 
 
#about_text { 
 
    transition: transform 0.5s; 
 
    height: 100px; 
 
    width: 400px; 
 
    background-color: blue; 
 
    display: inline-block; 
 
    transform-origin: 0 0; 
 
    transform: translateX(-450px); 
 
    overflow: hidden; 
 
} 
 
#about { 
 
    top: 10%; 
 
} 
 
#about_button:hover + #about_text { 
 
    transform: translateX(-4px); 
 
}

<html> 
 

 
<head> 
 
    <link rel="stylesheet" href="design.css"> 
 
</head> 
 

 
<body> 
 
    <div id="page1"> 
 
    <div id="about"> 
 
     <div id="about_button">About Me</div> 
 
     <div id="about_text"> 
 
     <p>Hi, I am a Computer Science student. I am interested in designing</p> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</body> 
 

 
</html>

來源

2016-05-23 15:45:45 dippas

你能解釋這是怎麼解決這個問題的一點點細節？ @dippas –

@DhruvChadha正如我在回答中所說的，'inline-block'屬性，如果默認情況下沒有設置'vertical-align'樣式將是'baseline'，因此您必須將其設置爲'top'，更多信息有關'vertical-align'的信息[這裏]（https://developer.mozilla.org/en/docs/Web/CSS/vertical-align） – dippas

然後，在添加文本的情況下，綠框的高度會發生什麼垂直對齊：基線？ –

變化position從relative到absolute

來源

2016-05-23 15:51:01 dwkd

這是爲什麼能夠解決這個問題？首先出了什麼問題？ –

什麼都沒有錯，只是一種不同的方式來顯示它。 'vertical-align：top'是修正錯誤的垂直對齊，默認情況下是基線，如下面的指示。更多信息[這裏]（https://www.w3.org/TR/2008/REC-CSS2-20080411/visudet.html#line-height）關於爲什麼 – dwkd

添加文字笨拙地改變按鈕的大小？

回答

相關問題