添加文字笨拙地改变按钮的大小？

在下面的代码中，将鼠标悬停在绿色按钮上时，会出现蓝色条。添加文字笨拙地改变按钮的大小？

但是当我在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

添加文字笨拙地改变按钮的大小？

回答

相关问题