望指教写tab栏时候，发现内容那一块总写的有问题？

顺晟科技

2022-09-25 07:39:52

250

想写一个tab栏切换，发现内容那一块（蓝色区域）怎都调不来...

效果：<style>

    *{
        padding: 0;
        margin: 0;
    }
    .main{
        margin: 10px auto;
        border: 1px solid black;
        width: 400px;
    }
    h4{
        text-align: center;
    }
    ul li{
        list-style: none;
    }
    .toptab{
        width: 400px;
        height: 20px;
        margin: 0 auto;
        background-color: pink;
    }
    .toptab li{
        float: left;
        margin-left: 20px;
    }
   .add span{
       float: right;
   }
   .bottomtab{
       width: 400px;
       height: 95px;
       background-color: skyblue;
   }
   
</style>

</head><body>

<div class="main">
    <h4>tab切换器</h4>
    <div class="box" id="tab">
        <div class="toptab">
            <ul>
                <li><span>tab1</span><span>x</span></li>
                <li><span>tab2</span><span>x</span></li>
                <li><span>tab3</span><span>x</span></li>
            </ul>
            <div class="add">
            <span>+</span>
        </div>
        </div>
        <div class="bottomtab">
            <section>我是1</section>
            <section>我是2</section>
            <section>我是3</section>
        </div>
    </div>
</div>

问题：1.为什么蓝色块里面的“我是1”会位置和其余不对？2.是什么原因导致它这样？3.如何解决

感谢各位帮助我的有心人，谢谢。

<div class="add">
<span>+</span>

这个后面少了一个 </div>

浮动的问题，里面的 li 被设置了浮动，之后文字就会绕着走。具体是因为 li 的高度是 21px（浏览器自动计算），而给父元素设置的高度是 20px，还有 1px 在外面，之后的 “我是1” 就会绕着这 1px 走。

父元素高度改成 21px 就不会出现该问题

.toptab {
  height: 21px;
}

高度 21px.png

但自己指定高度是不是有点麻烦，事实上，与浮动对应的有一个清除浮动

.toptab {
  ...
  /* height: 20px; */
  ...
}

.clearfix::after {
  content: "";
  clear: both;
  display: block;
}

<div class="toptab clearfix">

高度 21px.png

浮动的相关知识和其他清除浮动的方案参考：浮动

但用浮动做横向布局有点过时了，现在都是 flex 弹性布局，又新又好

.toptab {
  display: flex;
  justify-content: space-between;
  ...
  /* height: 20px; */
  ...
}

.toptab ul {
  display: flex;
}

.toptab li {
  /* float: left; */
  ...
}

.add span {
  /* float: right; */
}

高度 21px.png

上一篇：webgl 着色器 webgl着色器下一篇：钉钉h5微应用是什么:H5开发钉钉

网站建设

Html

望指教写tab栏时候，发现内容那一块总写的有问题？