Question

问题是ul.horizontal不能正常工作。它下面有一个很大的差距，文本输入不能保持100％宽度属性。

我该如何解决这个问题？

<ul class="form">
<li>
    <label>Firstname</label> <span>
    <input  name="title" type="text" placeholder="What is your">

</li>

<li>
    <ul class="horizontal">
        <li>
            <label>Beskrvning</label>
            <input  name="title" type="text" placeholder="Why does CSS work with fake tags?">
        </li>
        <li>
            <label>Beskrvning</label>
            <input name="title" type="text" placeholder="Why does CSS work with fake tags?">
        </li>
        <li>
            <label>Firstname</label>
            <input  name="title" type="text" placeholder="Why does CSS work with fake tags?">
        </li>
    </ul>
</li>

CSS

    ul.form {
    list-style:none;
    padding:0;
    margin:20px;
    border:1px solid #ccc;
    border-radius:5px;
}
li {
    border-bottom:1px solid #ccc;
}
li:last-child {
    border:0;
}
label {
    font-size:12px;
    color:#ccc;
    padding:5px 10px;
    position:absolute;
}
input {
    width:100%;
    padding:25px 10px 10px 10px;
    border:none;
    float:left;
    background:none;
}
li:before, li:after {
    content:"";
    display:table;
}
li:after {
    clear:both;
}
ul.horizontal {
    border:none;
    border-radius:0;
    margin:0;
    text-align: justify
}
ul.horizontal::after {
    width: 100%;
    display: inline-block;
    content:".";
    visibility: hidden
}
ul.horizontal li {
    display: inline-block;
    border:none;
    padding-left:40px;
    border-left:1px solid #ccc;
}
ul.horizontal li:first-child {
    border-left:none;
    padding-left:0;
}

Answer 1

大差距来自你的ul.horizontal::after（顺便说一下，我认为应该只有一个冒号，是吗？），因为你有一个带有显示块和隐藏可见性的句点。注释掉可见性，您可以看到期间。简单地将可见性更改为隐藏不会释放它在DOM上的空间。如果你绝对必须拥有它，你可以考虑让它达到1px的高度吗？

我把它拿出来，看到你的领域如何以50/50的布局突破你想要的。使用带有内部元素（输入）的CSS的2列和3列表格布局在100％而不使用表格时会有点棘手。因为那不是我刚刚为three-col水平UL添加快速类的问题，所以我们可以摆脱水平UL下的那个巨大空间。

http://jsfiddle.net/TLMWa/

希望这有帮助！

Justify list-item在它们下面留下了很大的空白。没有按预期工作

1 个答案: