html <header> <div class="menuBox"> <a id="tab1" onclick="setTab('tab',1,4)">标签1</a> <a id="tab2" onclick="setTab('tab',2,4)">标签2</a> <a id="tab3" onclick="setTab('tab',3,4)">标签3</a> <a id="tab4" onclick="setTab('tab',4,4)">标签4</a> </div> </header> 这样一个tab标签，怎么布局才能让他们横排显示并且靠右，如图这样：

怎么做才能让横排tab标签靠右布局？

发布于
2015-04-07

更新于
2015-04-07

✓ 已被采纳

方法一：

.menuBox{text-algin:right;}
.menuBox a{display:inline-block;}

方法二(注意，这种方法菜单排序是最后一个在最左边)：

.menuBox a{display:block;float:right;}

对不起，以上回答没有经过测试，只是一个思路，确实有你说的问题。下边是按方法一做的经过测试的代码(需要对HTML结构做稍微调整)。完整的测试代码如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>测试</title>
    <style type="text/css">
        *{ padding: 0px; margin: 0px;;}
        .mytab{ display: block; width:500px; margin:20px auto; background:#ccc;}
        .mytabtop{ display: block;  text-align: right; padding:5px 0 0 0; border-bottom:1px solid #333;}
        .mytabtop li{ display: inline-block; height:32px; }
        .mytabtop li a{ display: block; height:30px; line-height:30px; padding:0 20px; margin:0px 0 0 1px ; border:1px solid #333; font-size:12px; position:relative; top:1px}
        .mytabtop li a:hover, .mytabtop li a.nowtop{ height:40px; line-height:40px; background:#FFF; border-bottom:1px solid #FFF; font-size:12px; top:-4px;}
        .mytabbody {display: block; background:#FFF;}
    </style>
</head>
<body>
    <div class="mytab">
        <ul class="mytabtop">
            <li><a href="afd">菜单1</a></li><li><a href="afd">菜单2</a></li><li><a href="afd">菜单3</a></li><li><a href="afd" class="nowtop">菜单4</a></li><li><a href="afd">菜单5</a></li>
        </ul>
        <div class="mytabbody">
            Hello moto!
        </div>
    </div>
</body>
</html>

jl

361

发布于
2015-04-07

css.menuBox{
    display: flex;
    justify-content: flex-end;
}

贰陆

36721214

发布于
2015-04-07

menuBox加上float:right;就可以啦

首先我觉得，写在header标签里不大对。不知道写在body标签里好吗？

.menuBox {
    display: block;
    text-align: right;
    border-bottom: 1px solid #000;
}
.menuBox a {
    display: inline-block;
    text-align: center;
    padding: 5px 10px;
    border-top-left-radius: 6px;
    border-top-right-radius: 6px;
    border: 1px solid #000;
    border-bottom: 0;
    margin-bottom: -1px;
}
.menuBox a.active {
    background: #aaa;
    color: #fff;
    border-bottom: 1px solid #aaa;
}

个人感觉使用float布局比较简单些。

.menuBox{
  float:right;
  display: block;
}

.menuBox a{
  display: inline-block;
  /*其他样式代码*/
}

注意

消除浮动clear

怎么做才能让横排tab标签靠右布局？

注意

你尚未登录，登录后可以

body :first-child(不是body:first-child，中间有空格)伪类选择器到底选中了什么元素？

如何实现类似豆包的AI改写框跟随内容滚动效果？

问一个鼠标滚动事件，这种是怎么实现的？

如何在CSS中实现滚动条不溢出圆角框？

form对象根据表单dom元素的name属性获取元素对象是基于什么标准的？兼容性如何？

请问，是否可以设定Table的宽度，或者不让其超过父容器呢？

如何在Ant Design表格中同时设置scroll.x和scroll.y且表头不换行？