0

我需要定位帮助。我几乎尝试了所有事情，但仍然无法摆脱那个空白，有人知道如何解决这个问题吗？我是 html 新手，所以我只知道一些基础知识。

<html>
<head>   
<title>Lost Legends Motor Cycle Club</title>
</head>
<body bgcolor="#2C3539"text="white">
<div class="textContainer">
<center>
<h1 class="mainheading"><u><font color="#0033cc">Lost Legends MC</font></u></h1><div>           </div>

<a href="index.html" class="patch">Home</a>
<a href="roster.html" class="roster">Roster</a>
<a href="patches.html" class="patch2">Patches</a>
<a href="lock.html" class="member">Members</a>
<!-- Start Countdown -->
<span id="counts">
<div class="widget fullContainer" style="overflow:hidden; margin-bottom:5px">
<div class="bg"></div>
<div class="content">
    <div style="font-family: Oswald; font-size: 22px">
        <div class="featureBox" style="height: 100px; background:           url(http://media.gtanet.com/gta-5/images/gtav-release-date.png) no-repeat;">
            <!-- counter -->
            <div id="counterbox"></div>
            <script src="http://media.gtanet.com/gta-5/javascript/counter-previews.js"        type="text/javascript"></script>
             <script type="text/javascript">initcounter();</script>
        </div>
    </div>
</div>
<div class="topLeft"></div>
<div class="top"></div>
<div class="topRight"></div>
<div class="left"></div>
<div class="right"></div>
<div class="bottomLeft"></div>
<div class="bottom"></div>
<div class="bottomRight"></div>
</div>
<!-- End Countdown -->
</span>
<hr>
</div>
<style type="text/css">
div.textContainer { width: 1340;}
#counts {

top:90px;
left:0px;
background-color:yellow;
}

CSS

hr {background-color:blue;height: 5px;border-style:none;}
.patch {
position:relative;
margin-left: 600px;
margin-top: -50px;

-moz-box-shadow:inset 0px 1px 0px 0px #bee2f9;
-webkit-box-shadow:inset 0px 1px 0px 0px #bee2f9;
box-shadow:inset 0px 1px 0px 0px #bee2f9;
background-color:#213a9e;
-webkit-border-top-left-radius:0px;
-moz-border-radius-topleft:0px;
border-top-left-radius:0px;
-webkit-border-top-right-radius:0px;
-moz-border-radius-topright:0px;
border-top-right-radius:0px;
-webkit-border-bottom-right-radius:0px;
-moz-border-radius-bottomright:0px;
border-bottom-right-radius:0px;
-webkit-border-bottom-left-radius:0px;
-moz-border-radius-bottomleft:0px;
border-bottom-left-radius:0px;
text-indent:0px;
border:1px solid #000000;
display:inline-block;
color:#ffffff;
font-family:Arial;
font-size:18px;
font-weight:bold;
font-style:normal;
height:50px;
line-height:50px;
width:116px;
text-decoration:none;
text-align:center;
}.patch:hover {
background-color:#364d63;
}.patch:active {
position:relative;
top:1px;}

.patch2 {
-moz-box-shadow:inset 0px 1px 0px 0px #bee4f9;
-webkit-box-shadow:inset 0px 1px 0px 0px #bee4f9;
box-shadow:inset 0px 1px 0px 0px #bee4f9;
background-color:#213a9e;
-webkit-border-top-left-radius:0px;
-moz-border-radius-topleft:0px;
border-top-left-radius:0px;
-webkit-border-top-right-radius:0px;
-moz-border-radius-topright:0px;
border-top-right-radius:0px;
-webkit-border-bottom-right-radius:0px;
-moz-border-radius-bottomright:0px;
border-bottom-right-radius:0px;
-webkit-border-bottom-left-radius:0px;
-moz-border-radius-bottomleft:0px;
border-bottom-left-radius:0px;
text-indent:0px;
border:1px solid #000000;
display:inline-block;
color:#ffffff;
font-family:Arial;
font-size:18px;
font-weight:bold;
font-style:normal;
height:50px;
line-height:50px;
width:116px;
text-decoration:none;
text-align:center;
}.patch2:hover {
background-color:#364d63;
}.patch2:active {
position:relative;
top:1px;
}
.member {
position:relative;



-moz-box-shadow:inset 0px 1px 0px 0px #bee2f9;
-webkit-box-shadow:inset 0px 1px 0px 0px #bee2f9;
box-shadow:inset 0px 1px 0px 0px #bee2f9;
background-color:#213a9e;
-webkit-border-top-left-radius:0px;
-moz-border-radius-topleft:0px;
border-top-left-radius:0px;
-webkit-border-top-right-radius:0px;
-moz-border-radius-topright:0px;
border-top-right-radius:0px;
-webkit-border-bottom-right-radius:0px;
-moz-border-radius-bottomright:0px;
border-bottom-right-radius:0px;
-webkit-border-bottom-left-radius:0px;
-moz-border-radius-bottomleft:0px;
border-bottom-left-radius:0px;
text-indent:0px;
border:1px solid #000000;
display:inline-block;
color:#ffffff;
font-family:Arial;
font-size:18px;
font-weight:bold;
font-style:normal;
height:50px;
line-height:50px;
width:116px;
text-decoration:none;
text-align:center;
}.member:hover {
background-color:#364d63;
}.member:active {
position:relative;
top:1px;}
.roster {

-moz-box-shadow:inset 0px 1px 0px 0px #bee4f9;
-webkit-box-shadow:inset 0px 1px 0px 0px #bee4f9;
box-shadow:inset 0px 1px 0px 0px #bee4f9;
background-color:#213a9e;
-webkit-border-top-left-radius:0px;
-moz-border-radius-topleft:0px;
border-top-left-radius:0px;
-webkit-border-top-right-radius:0px;
-moz-border-radius-topright:0px;
border-top-right-radius:0px;
-webkit-border-bottom-right-radius:0px;
-moz-border-radius-bottomright:0px;
border-bottom-right-radius:0px;
-webkit-border-bottom-left-radius:0px;
-moz-border-radius-bottomleft:0px;
border-bottom-left-radius:0px;
text-indent:0px;
border:1px solid #000000;
display:inline-block;
color:#ffffff;
font-family:Arial;
font-size:18px;
font-weight:bold;
font-style:normal;
height:50px;
line-height:50px;
width:116px;
text-decoration:none;
text-align:center;
}.roster:hover {
background-color:#364d63;
}.roster:active {
position:relative;
top:1px;
}

http://i.imgur.com/IdwQn8Q.png ...................... ..................................................... ..................................................... ..................................................... ..................................................... ……………………………………………………………………………………………………………………………………

4

1 回答 1

0

伙计，这有点基本，我刚刚从你的页面上截取了一部分。

您需要做的是让按钮向右浮动，以便横幅可以适应。此时您有：

margin-left: 600px

在你的第一个按钮上，这意味着即使你看不到它左边的任何东西，虽然它看起来好像横幅可以放在那里，但那个空间属于那个按钮，横幅不能进去。因此，它被推到底部，您会看到空间。

所以看看这个：

http://jsfiddle.net/mQUQK/

我在按钮周围创建了一个额外的容器 div 并将该 div 浮动到右侧。

于 2013-09-05T23:32:25.870 回答