Question

我从w3school网站本身复制了css，但我没有得到相同的结果。我希望浮动li元素在屏幕右端溢出时消失，但它们总是出现在容器下方。

.w3-left {
float: left!important;
}
.w3-navbar {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
}
.w3-navbar li {
float: left;
overflow: hidden;
}

<div class="w3-card-2 w3-slim topnav" id="topnav" style="position: relative;">
    <div style="overflow:auto;">
        <ul class="w3-navbar w3-left"
    style="width:55%;overflow:hidden;height:44px">
            <li><a href="" class="w3-hide-small">HTML</a></li>
            <li><a href="" class="w3-hide-small">CSS</a></li>
            <li><a href="" class="w3-hide-small">JAVASCRIPT</a></li>
            <li><a href="" class="w3-hide-small">SQL</a></li>
            <li><a href="" class="w3-hide-small">PHP</a></li>
            <li><a href="" class="w3-hide-small">BOOTSTRAP</a></li>
            <li><a href="" class="w3-hide-small">JQUERY</a></li>
            <li><a href="" class="w3-hide-small">ANGULAR</a></li>
            <li><a href="" class="w3-hide-small">XML</a></li>
            <li><a href="" class="w3-hide-small">W3.CSS</a></li>
        </ul>
    </div>
</div>

Answer 1

您必须降低ul

的高度

<ul class="w3-navbar w3-left" style="width:55%;overflow:hidden;height:20px">

此处已更新JSfiddle

Answer 2

我不相信你应该根本使用floats。

标准float行为是当没有剩余水平空间时，下一行将显示在下一行。

因此，inline-block可能是比float更好的选择。

工作示例：

.topnav {
position: relative;
left: 50vw;
width: 50vw;
background-color: rgb(191,191,191);
overflow: hidden;
}

.w3-navbar {
height:1.4em;
line-height: 1.4em;
margin: 0;
padding: 0;
list-style-type: none;
overflow: hidden;
}

.w3-navbar li {
display: inline-block;
margin-right: 12px;
}

<div class="topnav">

<ul class="w3-navbar">
<li><a>HTML</a></li>
<li><a>CSS</a></li>
<li><a>JAVASCRIPT</a></li>
<li><a>SQL</a></li>
<li><a>PHP</a></li>
<li><a>BOOTSTRAP</a></li>
<li><a>JQUERY</a></li>
<li><a>ANGULAR</a></li>
<li><a>XML</a></li>
<li><a>W3.CSS</a></li>
</ul>

</div>

Answer 3

请尝试此代码

HTML

<div class="w3-card-2 w3-slim topnav" id="topnav" style="position: relative;">
      <div style="overflow:auto;">
        <ul class="w3-navbar w3-left" style="width:55%;overflow:hidden;height:20px;">
          <li><a href="" class="w3-hide-small">HTML</a></li>
          <li><a href="" class="w3-hide-small">CSS</a></li>
          <li><a href="" class="w3-hide-small">JAVASCRIPT</a></li>
          <li><a href="" class="w3-hide-small">SQL</a></li>
          <li><a href="" class="w3-hide-small">PHP</a></li>
          <li><a href="" class="w3-hide-small">BOOTSTRAP</a></li>
          <li><a href="" class="w3-hide-small">JQUERY</a></li>
          <li><a href="" class="w3-hide-small">ANGULAR</a></li>
          <li><a href="" class="w3-hide-small">XML</a></li>
          <li><a href="" class="w3-hide-small">W3.CSS</a></li>
        </ul>
      </div>
      </div>

CSS

    .w3-left {
    float: left!important;
}

.w3-navbar {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow:hidden;
    height:44px
}

ul li {
    display: block;
    padding: 0 5px;
}

.w3-navbar li {
    float: left;
    overflow: hidden;
}

*, *:before, *:after {
    box-sizing: inherit;
}

李浮漂不隐藏

3 个答案: