欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页  >  web前端

求教一个css的问题_html/css_WEB-ITnose

程序员文章站 2022-05-17 10:24:41
...

上面是代码
下边是css 
.page{    width: 90%;    margin-left: auto;    margin-right: auto;}#header{    position: relative;    margin-bottom: 0px;    color: #000;    padding: 0;}div#title{    display:block;    float:left;    text-align:left;}#logindisplay{    font-size:1.1em;    display:block;    text-align:right;    margin:10px;    color:White;}#menucontainer{    margin-top:40px;   }

我就是想问下
在
的上面，为什么页面出现的效果是
在上面
#logindisplay
{
font-size:1.1em;
display:block;
text-align:right;
margin:10px;
color:White;
}
如果 margin:10px; 是相对定位的话，那么id为logindisplay的应该在title的下边间隔为10才对啊， ，，，


回复讨论(解决方案)

#logindisplay
{
font-size:1.1em;
display:block;
text-align:right;
margin:10px;
color:White;
clear:both;
}


楼主 试试

我想问的是为什么，，

title 使用了float 脱离了文本流
logindisplay就跑上去了。

float:left的原因，给#logindisplay样式加一个clear:both;清楚浮动的样式

楼上的都是正解.

float:left的原因，给#logindisplay样式加一个clear:both;清楚浮动的样式


也可以将title的浮动去掉啊，感觉没有必要，如果title和logindisplay要在同一行面，你就要在logindisplay加个float：right；

title 使用了float 脱离了文本流 ，不在尊顺原来的文本流布局了，只是以父级为基础定位， 而其他的子级依然按照原来的文本流布局...这样
logindisplay 就占据了原来的title所在的位置，...logindisplay就跑上去了

建议了解一下浮动，文档流。。

求教一个css的问题_html/css_WEB-ITnose

声明：本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn核实处理。

相关文章

相关视频

网友评论

文明上网理性发言，请遵守 新闻评论服务协议

我要评论
  • 求教一个css的问题_html/css_WEB-ITnose

    • 专题推荐

    作者信息
    求教一个css的问题_html/css_WEB-ITnose

    认证0级讲师

    发布技术文章
    • 最新文章
    • 热门排行
    推荐视频教程
  • 求教一个css的问题_html/css_WEB-ITnosejavascript初级视频教程
  • 求教一个css的问题_html/css_WEB-ITnosejquery 基础视频教程
    • 视频教程分类
    相关标签： 求教一个css的问题

    上一篇： wampserver改变默认网站目录的办法，wampserver目录_PHP教程

    下一篇： 内嵌盒子定位和居中问题，在缩放浏览器情况下，不会影响盒子的布局_html/css_WEB-ITnose

    推荐阅读