前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >why ? 元素不能实现左对齐! 浮动问题?

why ? 元素不能实现左对齐! 浮动问题?

作者头像
用户9914333
发布2022-07-22 14:39:16
6470
发布2022-07-22 14:39:16
举报
文章被收录于专栏:bug收集

问题:

元素内容一直显示在中间,不能实现左对齐

代码如下:

代码语言:javascript
复制
  <div class="toolbar">
        <div class="container">
            <!--            left-->
            <div class="tbLeft left">
                <ul>
                    <li><a href="#">Lorem.</a></li>
                    <li><a href="#">Lorem ipsum.</a></li>
                </ul>
            </div>
            <!--            right-->
            <div class="right">
                Welcome to the official Australian tourism website.This site uses cookies.
            
            </div>
        </div>
    </div>

类toolbar, 因为设置了固定高度,就没有去清除浮动去扩展盒子的高度。

代码语言:javascript
复制
.toolbar {
   background-color: #004165;
   height: 46px;
}

就出现了,h2标题的文字,显示在中间;即时设置text-align:left 也是显示在中间

原因:

就是因为没有清除浮动,受到了上面的浮动元素,带来的影响 解决方法:

清除浮动的影响

代码语言:javascript
复制
.toolbar {
    background-color: #004165;
    height: 46px;
    overflow:hidden;
}

总结:

给父盒子设置高度,可以解决父盒子高度扩展的问题,但是浮动后面元素的影响还是没有清除。

本文参与 腾讯云自媒体同步曝光计划,分享自微信公众号。
原始发表:2021-07-01,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 bug收集 微信公众号,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档