个人中心
gpt4 book ai didi

css - 如何在不制作空白行的情况下将此横幅添加到我的页面？

转载 作者：行者123 更新时间：2023-11-28 12:24:30 26 4
gpt4 key购买 nike

我需要定位帮助。我几乎尝试了所有方法，但仍然无法摆脱那个空白区域，有人知道如何解决这个问题吗？我是 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..................................................... ..................................................... ..................................................... ..................................................... ..................................................... ............................

最佳答案

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

您需要做的是让按钮向右浮动，以便横幅能够适应。目前您有:

margin-left: 600px

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

看看这个:

http://jsfiddle.net/mQUQK/

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

关于css - 如何在不制作空白行的情况下将此横幅添加到我的页面？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/18647331/

26 4 0
文章推荐： html - 使 float 的 div 容器保持原位，因为它们上方的 div 展开并重叠
文章推荐： javascript - 将一个标签的文本替换为另一个标签的文本
文章推荐： jquery - DIV 的动态 anchor 标记，但 CSS 点击不起作用
文章推荐： javascript - jQuery 每个函数都会迭代所有内容，尽管 if 语句
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com