Question

所有

现在，我想实现一个水平滚动标题栏。我使用的布局是：

<div id="header_cnt">
    <div id="header_mn">
        <div class="mn_item">KWD1</div>
        <div class="mn_item">KWD2</div>
        <div class="mn_item">KWD3</div>
        <div class="mn_item">KWD4</div>
        <div class="mn_item">KWD5</div>
    </div>
</div>

风格：

#header_cnt {
    width:100%;
    height:60px;
    position: fixed;
}

#header_mn {
    background-color: lightyellow;
    width:100%;
    height:60px;
    overflow: hidden;
    padding:0px;
}

#header_mn .mn_item {
    display:inline-block;
    width:200px;
}

我想要的第一步效果是：标题菜单固定在顶部，所有菜单项都位于一行，溢出部分隐藏而不是换行到下一行。

[更新]我弄清楚自己，我发现的方式是使用FLEXBOX： 忘记上面的结构，只需使用一些新的但相似的结构：

    <head>
        <style>
        body, html {
            padding:0px;
            margin:0px;
        }
            section {
                border: 1px solid gray;
                /*padding: 1em;*/
                height:300px;
                width:100%;

                display: flex;
                flex-direction: row;
                align-items: flex-start;
                justify-content:flex-start;

                position:fixed;
                overflow: auto;
            }
            div {
                min-width: 250px;
                height: 50px;
                border: 1px solid steelblue;
            }
        </style>
    </head>
    <body>
        <section>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
        </section>
</body>

由于

Answer 1

您可以使用flexbox创建此标题，然后查看here您还可以查看flexbox here

CSS

#header_cnt {
  width:100%;
  height:60px;
  position: fixed;
  background:#d7d7d7;
}

#header_mn {
  background-color: beige;
  width:100%;
  height:60px;
  overflow: hidden;
  padding:0px;
  display:flex;
  flex-direction:row;
  justify-content:space-around;
}
#header_mn .mn_item:first-child{
  margin-left:10%;
}
#header_mn .mn_item {
  display:inline-block;
  width:200px;
  align-self:center;
  justify-content:center;
}

希望这有帮助

Answer 2

你需要漂浮：留在那些.mn_item

我仍然没有评论的声望，所以这是我的提示。

您可以将#header_mn的最小宽度设置为.mn_item的倍数。

水平滚动标题栏布局

2 个答案: