1
在右下角我有1个按钮来打开一个聊天，然后一个div显示当前在线用户，然后另一个按钮进入页面顶部。使按钮和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> \t \t \t \t
</span>
</div>
<div class="chat-icon">
<button class="fa fa-comments-o" id="button" name="chat" aria-hidden="true"></button>
</div>
</div>
</div>
你为什么不使用div元素？制作按钮并不总是意味着你必须把一个按钮标记 –
不客气:) –