gpt4 book ai didi

css - 使水平列表中的最后一个元素拉伸(stretch)到剩余空间?

转载 作者:太空宇宙 更新时间:2023-11-03 23:51:16 25 4
gpt4 key购买 nike

现有代码

  • index.html:

    <!DOCTYPE html>
    <head>
    <title>Test</title>
    <link href="stylesheets/index.css" rel="stylesheet"
    type="text/css" />
    </head>
    <ul>
    <li>Foo</li>
    <li>Bar</li>
    <li><input /></li>
    </ul>
  • index.scss(不拉伸(stretch)):

    @import "compass/reset";
    @import "compass/typography/lists/horizontal-list";

    body {
    background: darkgray;
    }

    ul {
    width: 100%;
    background: lightgray;
    @include horizontal-list;
    }

问题

让最后一个元素占据剩余元素的优雅方法是什么 水平空间?

详细信息:

  • 请参阅下图了解所需的输出。

  • HTML 代码的改编是可以的,只要它在语义上保持清晰。

  • 该解决方案应该适用于最新的 Firefox、最新的 Chrome,以及在 IE8-11 中(JavaScript 垫片,如果需要,是可以接受的)。

Desired output

最佳答案

只有 css 的解决方案。

HTML:

<ul>
<li>Foo</li>
<li>Bar</li>
<li class="last"><input type="text" /></li>
</ul>

CSS:

ul li { float: left; list-style: none; }
ul li.last { float: none; display: block; overflow: hidden; }
ul li input { width: 100%; border: 0; box-shadow: inset 0 0 1px #000; }

演示:

* { margin: 0; padding: 0; }
ul li { float: left; list-style: none; }
ul li.last { float: none; display: block; overflow: hidden; }
ul li input { width: 100%; border: 0; box-shadow: inset 0 0 1px #000; }
<ul>
<li>Foo</li>
<li>Bar</li>
<li class="last"><input type="text" /></li>
</ul>

( Also on jsFiddle )

IE7+应该支持

关于css - 使水平列表中的最后一个元素拉伸(stretch)到剩余空间?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20018895/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com