css布局问题：给div中的p加边框，边框错位

html代码部分
<body>
<div id="rank">
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<p class="p1">一般</p>
</div>
</body>

css部分
* {margin:0;padding:0;}
#rank { width:135px;margin:10px auto;height:28px;}
#rank li { width:27px;
float:left;
height:28px;
cursor:pointer;
background:url(star.gif) no-repeat 0 0;
list-style:none;
}
#rank p.p1 {margin : 0 auto;
border-style: solid;
border-width: 1px;
border-color: gray;
width: 136px;
height: 23px;
text-align: center;
}
图片效果http://e.picphotos.baidu.com/album/s%3D1400%3Bq%3D90/sign=5faed10b895494ee83220b1d1dc5db8f/8601a18b87d6277f325f628c2d381f30e924fc31.jpg

我想要的效果是红色的框线，实际显示的结果是黑色的框线，都框到星星那里了。请问是什么设置的有问题？

举报该文章

其他看法

第1个回答 2015-05-11

<ul>并没有被里面的<li>撑起来，你可以给ul一个overflow：hidden 或者给他宽高追问

添加了这个语句之后确实达到我要的效果了很感谢，不过我有点不明白，就是我的#rank的div设置了高度，也设置了ul里面的li的高度，和p的高度，就只是没设置ul的高度。为什么ul没被li撑起呢？然后设置的p的边框跑到div里面的#rank周围就是因为上面的高度没设置然后p的范围比我设置的大是这个意思吗？

追答

因为里面的设置了float:left，“浮动出了”ul，ul就找不到高度了，然而利用overflow:hidden的特性就能清除浮动的这种效果

详细的可以参考这里：http://www.chinaz.com/design/2008/0818/35473.shtml

本回答被提问者和网友采纳

css怎样给div添加边框
1、首先我们要打开DW编辑工具 2、进入之后新建一个文件 3、在从中选择HTML文件，点击创建 4、这样我们就进入编辑界面了 5、接下来我们编辑上一个“p”标签，命名为box 6、在创建一个样式，写上.box{} 7、在css样式.box{}里加上这个代码“border:solid1px#333333;”8、这样在浏览器上就可以显示...

div+css布局错乱问题解决方法
这个问题需要把left和right再使用一个div包含起来，直接上代码啦，下边就可以实现你要求的布局。foot总在下边，并能随着left，right的高度改变自动调整。<div id="box"> <div id="content"> <div id="left">这里是页面的左部分内容<\/div> <div id="right">这里是页面的右部分内容<\/div> <\/di...

div+css。要添上div边框颜色和实际的div大小冲突了该怎...
回答：简单的说,如果你的div宽100,高100,你要写个上下左右都是1的边框。那么,你的宽就变成了98,高98.也就是说,div实际的宽度要减去两边边框的宽度。不减的话,就错位了。

div css边框描边后移位了求大神
你可以看看把边框全加上去是什么情况，因为预览往下移动一行说不定时表格上面一行本来就占那么多空间第二检查下标签有没有闭合比如<tr><\/tr>写成了<tr><tr> 第三你布局有问题 div 套表格表格再套div 为什么都用div或块级元素布局呢比如企业新闻这个用<h1>之类的块级元素，然后背景...

css对div设置边框?
1、打开html开发工具，新建一个html代码页面，然后创建一个<div>标签，并给这个标签添加文字和一个class为了solid。创建<div>代码:<div>solid:定义一个边框<\/div> 2、设置线条边框。创建<style>标签，然后在这个标签里设置solid类的样式为实线边框。css样式代码：<styletype=\\"text\/css\\"> .solid{ ...

CSS+DIV 边框越界如何解决?
改变宽度值使其不被撑开一般来说框架是可以用鼠标拖动来调整大小的~ 不过这只是在预览时~ 如果你想一加载网页时的大小就适合的话还得你在css代码中设置一下

css设置DIV边框的问题。
你是想要2个div在一行显示还是分行显示，前者的话你给第一个div css加个float:left即可，至于你说的2个div加上边框后不能并排显示那是因为2个div宽度大于大的。解决方法就是把大的div宽度加大或是里面的宽度缩小点。

div+css布局中为什么左右边框不对称了?
padding:8px;} .right .top{border:1px solid blue;float:left;width:678px;} .right .box{width:60%;float:left;border:1px solid black;} .box1,.box2,.box3{border:1px dashed red;margin:20px;}<\/style><\/head><body><div class="main">  ...

用CSS怎么让一个div的边框线或者背景覆盖掉另一个div的一条边框线...
用相对定位和绝对定位就行了 <div> <div id="div1"><\/div> <div id="div2"><\/div> <\/div> div1用相对定位，div2用绝对定位，然后在用 left right top bottom 调整位置，覆盖在他上面就行了。如果图层的覆盖顺序有问题加上 z-index:数值; 数值越大的在上面。

div中加<h>或<p>标签,div就会下移,什么原因?
因为 h标题标签有默认的 margin 和默认的padding 加起来高度大于父级容器div 所以他会错位你去网上随便打开一个浏览器查看元素都可以看到如下css代码 html, body, div, span, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, address, big, cite, code, del, em...

相似回答

大家正在搜