0
我想創建一個html模板，但它不會正確對齊，它正常工作，然後我嘗試將東西放入，然後它就像這樣。HTML模板對齊
<html>
<head><style>
html, body {
height:100%;
}
body {
overflow-y:hidden;
overflow-x:hidden;
}
header{
width: 100%;
background: -webkit-linear-gradient(#0e054d 0%, #2014ff 100%);
position: fixed;
top: 0;
height: 62px !important;
opacity:.8;
border-style: Outset;
border-color: blue;
}
.content {
position:relative;
height: 100%;
width:600px; /* Sizing - any length */
padding:60px 0 30px 0; /* Header height and footer height */
margin:0 auto 0 auto; /* Center content */
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
-o-box-sizing:border-box;
-ms-box-sizing:border-box;
box-sizing:border-box;
}
.sidebar1, .sidebar2 {
background: #000047;
top:59px;
bottom:30px;
width: 151px;
position:absolute;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
-o-box-sizing:border-box;
-ms-box-sizing:border-box;
box-sizing:border-box;
}
.sidebar1 {
left: -212;
}
.sidebar2 {
right: -239;
}
#scrollable2 {
background:green;
height: 99%;
min-width: 750px;
margin-left: -61px;
margin-right: 100px;
overflow:auto;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
-o-box-sizing:border-box;
-ms-box-sizing:border-box;
box-sizing:border-box;
}
.button {
-moz-box-shadow:inset 0px 1px 0px 0px #f29c93;
-webkit-box-shadow:inset 0px 1px 0px 0px #f29c93;
box-shadow:inset 0px 1px 0px 0px #f29c93;
background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #fe1a00), color-stop(1, #ce0100));
background:-moz-linear-gradient(center top, #fe1a00 5%, #ce0100 100%);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#fe1a00', endColorstr='#ce0100');
background-color:#fe1a00;
-moz-border-radius:6px;
-webkit-border-radius:6px;
border-radius:6px;
border:1px solid #d83526;
display:inline-block;
color:#ffffff;
font-family:arial;
font-size:15px;
font-weight:bold;
padding:6px 24px;
text-decoration:none;
text-shadow:1px 1px 0px #b23e35;
}.button:hover {
background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #ce0100), color-stop(1, #fe1a00));
background:-moz-linear-gradient(center top, #ce0100 5%, #fe1a00 100%);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ce0100', endColorstr='#fe1a00');
background-color:#ce0100;
}.button:active {
position:relative;
top:1px;
}
footer {
width: 100%;
background: #000047;
position: fixed;
bottom: 0;
height: 30px;
}
.p {
text-align: center;
color: #bcbcbc;
font-size: x-large;
}
</style></head>
<body>
<!-- Always on top: Position Fixed-->
<header>
<!--<button class="button">Dynmap</button>-->
<p class="p";>Header</p>
</header>
<!-- Fixed size after header-->
<div class="content">
<!-- Always on top. Fixed position, fixed width, relative to content width-->
<div class="sidebar1">
</div>
<!-- Scrollable div with main content -->
<div id="scrollable2">
Server Info</br>
Server Info</br>
Server Info</br>
Server Info</br>
Server Info</br>
Server Info</br>
Server Info</br>
Server Info</br>
Server Info</br>
Server Info</br>
Server Info</br>
Server Info</br>
Server Info</br>
Server Info</br>
Server Info</br>
Server Info</br>
Server Info</br>
Server Info</br>
Server Info</br>
Server Info</br>
Server Info</br>
Server Info</br>
Server Info</br>
Server Info</br>
Server Info</br>
Server Info</br>
Server Info</br>
Server Info</br>
Server Info</br>
Server Info</br>
Server Info</br>
</div>
<!-- Always on top. Fixed position, fixed width, relative to content width -->
<div class="sidebar2">
</div>
</div>
<!-- Always at the end of the page -->
<footer>
</footer>
</body>
</html>
我試着把按鈕放進去，但是然後頂部失調，我無法修復它。
使用位置：絕對可能會非常棘手，有時並不能解決任何問題，特別是在更改窗口大小時。使用浮動和更改邊距...這將是最佳對齊方式 – DWolf
您能否澄清您想要修復的問題？看起來你想要評論按鈕，但沒有打破居中的標題文本，但我不能確定。如果這就是你想要的，問題是因爲'p'是一個塊元素，所以它會在'.button'下面，這也是一個塊元素。將'.button'改爲'display：block; float：left;'，它可以解決你的問題。 – Kraz