Question

我有以下设置

<div class="bar">
    <div>one</div>
    <div>two</div>
    <div>three</div>
    <div>four</div>
    <div>five</div>
    <div>six</div>
    <div>seven</div>
    <div>eight</div>
    <div>nine</div>
    <div>ten</div>
    <div>eleven</div>
    <div>twelve</div>
</div>

用css

.bar>div {
    display: inline-block;
    margin-left: 10px;
}

我想这样做，如果div.bar太小，它的孩子就会消失在左边。所以“一个”首先消失（完全或部分消失）。

我的css知识很少，所以我甚至不知道从哪里开始。我尝试使用overflow但没有成功。我假设它不会被触发，因为inline-block会自动换行。

Answer 1

尝试为每个div提供类，并使用float表示容器和子div而不是inline-block，它们将向右消失，同时保持水平线和文本对齐保持在左侧。

您可以查看 working Jsfiddle

<div class="bar">
    <div class="numbers">one</div>
    <div class="numbers">two</div>
    <div class="numbers">three</div>
    <div class="numbers">four</div>
    <div class="numbers">five</div>
    <div class="numbers">six</div>
    <div class="numbers">seven</div>
    <div class="numbers">eight</div>
    <div class="numbers">nine</div>
    <div class="numbers">ten</div>
    <div class="numbers">eleven</div>
    <div class="numbers">twelve</div>
</div>

和.css部分

.bar
{
  height: 20px;
  overflow: hidden;
  float: left;
}

.bar>div:hover
{
  cursor: pointer;
  color: white;
}

.numbers
{
  float: right;
  background-color: yellow;
  width: 50px;
}

让div内容消失在左边

1 个答案: