css怎么让文字放在固定的位置
在一个title1.gif为背景的图片，从像素270px38px开始写一些链接，但是不知道为啥我的几个链接都黏在一起了，帮看看吧。这是css：#header{float:...
在一个title1.gif为背景的图片，从像素270px 38px开始写一些链接，但是不知道为啥我的几个链接都黏在一起了，帮看看吧。这是css：#header{
float: left;
width: 990px;
height:93px;
background: url(images/title1.gif) no-repeat 0 0;
}#header a{display:block;width:200px;height:93px;}.header-1{
position:absolute;
top:38px;
left:270px;
width: 220px;
height:50px;
overflow:hidden;
}.header-1 li {
float:left;
list-style-type: none;
width: 5px;
}.header-1 li a{
text-decoration:none;
padding-top:1px;
display:block;
width:5px;
margin-left:1px;
} 这是html<div id="header">
<a href="/"></a>
<div class="header-1">
<li><a href="/">home</a></li>
<li><a href="/">about</a></li> <li><a href="/">about</a></li>
</div>
</div> 展开
float: left;
width: 990px;
height:93px;
background: url(images/title1.gif) no-repeat 0 0;
}#header a{display:block;width:200px;height:93px;}.header-1{
position:absolute;
top:38px;
left:270px;
width: 220px;
height:50px;
overflow:hidden;
}.header-1 li {
float:left;
list-style-type: none;
width: 5px;
}.header-1 li a{
text-decoration:none;
padding-top:1px;
display:block;
width:5px;
margin-left:1px;
} 这是html<div id="header">
<a href="/"></a>
<div class="header-1">
<li><a href="/">home</a></li>
<li><a href="/">about</a></li> <li><a href="/">about</a></li>
</div>
</div> 展开
4个回答
展开全部
css让文字放在固定的位置：
.通过position的绝对定位，然后在通过left和top就可以设置你的图片位置了；代码如下
<div style='position:absolut; left:0px; top:0px'>
<p>我是固定位置的测试文字</p>
</div>
2.通过div+css的布局来实现给定一个包裹图片的div默认位置就行，代码如下
<div>
<div style='flaot:left; width:330px; height:200px;'>
<p>我是左边的固定测试文字</p>
</div>
<div style='flaot:left; width:330px; height:200px;'>
<<p>我是右边的固定测试文字</p> </div>
</div>
.通过position的绝对定位，然后在通过left和top就可以设置你的图片位置了；代码如下
<div style='position:absolut; left:0px; top:0px'>
<p>我是固定位置的测试文字</p>
</div>
2.通过div+css的布局来实现给定一个包裹图片的div默认位置就行，代码如下
<div>
<div style='flaot:left; width:330px; height:200px;'>
<p>我是左边的固定测试文字</p>
</div>
<div style='flaot:left; width:330px; height:200px;'>
<<p>我是右边的固定测试文字</p> </div>
</div>
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
几个链接都黏在一起，是因为你的li样式里的 width被你定成了5PX ，改大点就行了.header-1 li {
float:left;
list-style-type: none;
width: 5px;
}
float:left;
list-style-type: none;
width: 5px;
}
本回答被网友采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
<html>
<head>
<style>
#header{
float: left;
width: 990px;
height:93px;
background: #blue url(images/title1.gif) no-repeat 0 0;
}#header a{display:block;width:200px;}/*这里不要设置height 属性*/.header-1{
position:absolute;
top:38px;
left:270px;
width:220px;
overflow:hidden;
/*这里不要设置height 属性*/
}.header-1 li {
float:left;
list-style-type: none;
width: 50px;
height:30px;/*这里是高是 li的高 */
}.header-1 li a{
text-decoration:none;
padding-top:1px;
display:block;
margin-left:1px;
}*/
</style>
</head><body>
<div id="header">
<a href="/"></a>
<div class="header-1">
<li><a href="/" style="background:#999999;">home</a></li>
<li><a href="/" style="background:#aaaaaa;">about</a></li>
<li><a href="/" style="background:#bbbbbb;">about</a></li>
</div>
</div>
</body>
</html>
把上面代码直接放1个新的html文件里 浏览 有什么问题在问我
<head>
<style>
#header{
float: left;
width: 990px;
height:93px;
background: #blue url(images/title1.gif) no-repeat 0 0;
}#header a{display:block;width:200px;}/*这里不要设置height 属性*/.header-1{
position:absolute;
top:38px;
left:270px;
width:220px;
overflow:hidden;
/*这里不要设置height 属性*/
}.header-1 li {
float:left;
list-style-type: none;
width: 50px;
height:30px;/*这里是高是 li的高 */
}.header-1 li a{
text-decoration:none;
padding-top:1px;
display:block;
margin-left:1px;
}*/
</style>
</head><body>
<div id="header">
<a href="/"></a>
<div class="header-1">
<li><a href="/" style="background:#999999;">home</a></li>
<li><a href="/" style="background:#aaaaaa;">about</a></li>
<li><a href="/" style="background:#bbbbbb;">about</a></li>
</div>
</div>
</body>
</html>
把上面代码直接放1个新的html文件里 浏览 有什么问题在问我
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
因为你把.header li a .header li都设置了宽5px，导致文字重叠，不知道你想要什么效果，你的外层高度都比内层小，再加上header-1设置了样式overflow:hidden;这样只能显示一个li的内容
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
更多回答（2）
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
