Question

在以下代码中，将鼠标悬停在绿色按钮上时，会出现蓝色条。

但是，当我写下＃34;关于我＆＃34;在about_button div（即绿色按钮）上，按钮的形状会发生变化。

我怎样才能成功写下＃34;关于我＆＃34;在绿色按钮上没有破坏按钮的形状？

＆＃13;

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);
}

＆＃13;

<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>

＆＃13;

Answer 1

向其添加vertical-align:top，因为inline-block默认为vertical-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>

Answer 2

将position上的#about_button从relative更改为absolute

Answer 3

按钮上有属性DataRow，这会强制形状环绕其中的内容。将其更改为display:inline-block。

添加文字会不会改变按钮的大小？

3 个答案: