html - 垂直 float 按钮

Question

我正在尝试为我的网站制作垂直 float 按钮，但这就是我得到的。 文本在框外

CSS

#feedback { 
  height: 104px; 
  width: 104px; 
  position: fixed; 
  top: 40%; 
  z-index: 999;
  transform: rotate(-90deg);
  -webkit-transform: rotate(-90deg); 
  -moz-transform: rotate(-90deg); 
  -o-transform: rotate(-90deg); 
  filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}

#feedback a { 
  display: block; 
  background: #f00; 
  height: 15px; 
  width: 70px; 
  padding: 8px 16px;
  color: #fff; 
  font-family: Arial, sans-serif; 
  font-size: 17px; 
  font-weight: bold; 
  text-decoration: none; 
  border-bottom: solid 1px #333;
  border-left: solid 1px #333;
  border-right: solid 1px #fff;
}

#feedback a:hover { 
  background: #06c; 
}

HTML

<div id="feedback">
  <a href="/feedback_url/">Test</a>
</div>

Answer 1

height: 15px 是导致您出现此问题的原因。否则一切都很好。从 #feedback a 中删除 height 就可以了。

#feedback a {
  display: block;
  background: #f00;
  height: 15px; /* Remove this... */

元素的高度通常由内容和line-height 设置。如果您尝试手动设置，它会脱离内容的上下文。这就是现在发生的事情。