html - 并排使按钮和div具有相同的高度

Question

在右下角，我有 1 个用于打开聊天的按钮，然后是一个显示当前在线用户的 div，然后是另一个用于转到页面顶部的按钮。

我使用 <button>按钮上的标签，但按钮和 div 的填充不同。如果我使用相同的填充，div 会更大，虽然不会很大，但会让我很烦。

有什么简单的方法可以解决这个问题吗？都是position:fixed;

这是我的代码:

jQuery(document).ready(function($) {
  $(window).scroll(function() {
    if ($(this).scrollTop() > 50) {
      $('#backToTop').fadeIn('slow');
    } else {
      $('#backToTop').fadeOut('slow');
    }
  });
  $('#backToTop').click(function() {
    $("html, body").animate({
      scrollTop: 0
    }, 500);
    //$("html, body").scrollTop(0); //For without animation
    return false;
  });
});

.chat-wrapper {
  position: fixed;
  display: inline-block;
  width: 100%;
  right: 0;
  bottom: 0;
  z-index: 1000;
}
.top {
  float: right;
  background-color: #1d1d1d;
  border-top: 1px solid #000;
  background-image: -webkit-linear-gradient(bottom, #1a1b1f, #212528);
  background-image: -moz-linear-gradient(bottom, #1a1b1f, #212528);
  background-image: -o-linear-gradient(bottom, #1a1b1f, #212528);
  background-image: linear-gradient(to top, #1a1b1f, #212528);
  -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, .1), inset 0 1px 1px rgba(255, 255, 255, .1);
  -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, .1), inset 0 1px 1px rgba(255, 255, 255, .1);
  box-shadow: 0 1px 3px rgba(0, 0, 0, .1), inset 0 1px 1px rgba(255, 255, 255, .1);
  z-index: 2000;
}
.chat-online {
  width: 75px;
  float: right;
  padding: 7px;
  border-left: 1px solid #000;
  border-right: 1px solid #000;
  background-color: #1d1d1d;
  border-top: 1px solid #000;
  background-image: -webkit-linear-gradient(bottom, #1a1b1f, #212528);
  background-image: -moz-linear-gradient(bottom, #1a1b1f, #212528);
  background-image: -o-linear-gradient(bottom, #1a1b1f, #212528);
  background-image: linear-gradient(to top, #1a1b1f, #212528);
  -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, .1), inset 0 1px 1px rgba(255, 255, 255, .1);
  -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, .1), inset 0 1px 1px rgba(255, 255, 255, .1);
  box-shadow: 0 1px 3px rgba(0, 0, 0, .1), inset 0 1px 1px rgba(255, 255, 255, .1);
  z-index: 2000;
}
#button {
  background: none;
  border: none;
  padding: 8px;
  color: #05c7f7;
}
#backToTop {
  background: none;
  border: none;
  padding: 8px;
  color: #05c7f7;
}
#button:hover {
  color: #fff !important;
  -webkit-box-shadow: 0 0 10px rgba(5, 199, 247, 0.5), inset 0 0 1px 1px #05c7f7;
  -moz-box-shadow: 0 0 10px rgba(5, 199, 247, 0.5), inset 0 0 1px 1px #05c7f7;
  box-shadow: 0 0 10px rgba(5, 199, 247, 0.5), inset 0 0 1px 1px #05c7f7;
  background-image: linear-gradient(to top, #096aa1, #26c3f6);
}
#backToTop:hover {
  color: #fff !important;
  -webkit-box-shadow: 0 0 10px rgba(5, 199, 247, 0.5), inset 0 0 1px 1px #05c7f7;
  -moz-box-shadow: 0 0 10px rgba(5, 199, 247, 0.5), inset 0 0 1px 1px #05c7f7;
  box-shadow: 0 0 10px rgba(5, 199, 247, 0.5), inset 0 0 1px 1px #05c7f7;
  background-image: linear-gradient(to top, #096aa1, #26c3f6);
}
#button:active {
  color: #fff !important;
  -webkit-box-shadow: 0 0 10px rgba(5, 199, 247, 0.5), inset 0 0 1px 1px #05c7f7;
  -moz-box-shadow: 0 0 10px rgba(5, 199, 247, 0.5), inset 0 0 1px 1px #05c7f7;
  box-shadow: 0 0 10px rgba(5, 199, 247, 0.5), inset 0 0 1px 1px #05c7f7;
  background-image: linear-gradient(to top, #096aa1, #26c3f6);
}
#backToTop:active {
  color: #fff !important;
  -webkit-box-shadow: 0 0 10px rgba(5, 199, 247, 0.5), inset 0 0 1px 1px #05c7f7;
  -moz-box-shadow: 0 0 10px rgba(5, 199, 247, 0.5), inset 0 0 1px 1px #05c7f7;
  box-shadow: 0 0 10px rgba(5, 199, 247, 0.5), inset 0 0 1px 1px #05c7f7;
  background-image: linear-gradient(to top, #096aa1, #26c3f6);
}
#button:focus {
  outline: 0;
}
#backToTop:focus {
  outline: 0;
}
.chat-icon {
  float: right;
  border-left: 1px solid #000;
  background-color: #1d1d1d;
  border-top: 1px solid #000;
  background-image: -webkit-linear-gradient(bottom, #1a1b1f, #212528);
  background-image: -moz-linear-gradient(bottom, #1a1b1f, #212528);
  background-image: -o-linear-gradient(bottom, #1a1b1f, #212528);
  background-image: linear-gradient(to top, #1a1b1f, #212528);
  -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, .1), inset 0 1px 1px rgba(255, 255, 255, .1);
  -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, .1), inset 0 1px 1px rgba(255, 255, 255, .1);
  box-shadow: 0 1px 3px rgba(0, 0, 0, .1), inset 0 1px 1px rgba(255, 255, 255, .1);
  z-index: 2000;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="chat-wrapper">
  <div class="chat-content">
    <div class="top">
      <button class="fa fa-chevron-up" id="backToTop" name="top" aria-hidden="true"></button>
    </div>
    <div class="chat-online" tooltip="Current users online (<5min)">
      Online : <span class="fr" id="status">
        <script type="text/javascript">
          var int = self.setInterval("update()", 1000);
          function update() {
            $('#status').load('/online.php');
          }
        </script>				
      </span>
    </div>
    <div class="chat-icon">
      <button class="fa fa-comments-o" id="button" name="chat" aria-hidden="true"></button>
    </div>
  </div>
</div>

Answer 1

使用 div 元素而不是按钮 :)