Question

我在列表中有这个链接，里面有一些输入：

<ul class="code__list">
    <li class="code__item"> <a class="code__link private" href="#">Test1<b><input type="text" class="intercomInput forCode" name="clientCode" value="1234"></b><div>Test2</div></a>

    </li>
</ul>

如何将它放在一行？的 Fiddle

Answer 1

将div替换为span，或将CSS display属性设置为inline或inline-block，如下所示。

<ul class="code__list">
    <li class="code__item">
        <a class="code__link private" href="#">Test1
            <b>
                <input type="text" class="intercomInput forCode" name="clientCode" value="1234">
            </b>
            <div style="display: inline-block">Test2</div>
         </a>
    </li>
</ul>

Answer 2

您可以使用div而不是span，因为div是block元素，跨度是inline，这就是您的内容未展示的原因在一行。

试试这个：

<ul class="code__list">
    <li class="code__item"> <a class="code__link private" href="#">Test1<b><input type="text" class="intercomInput forCode" name="clientCode" value="1234"></b><span>Test2</span></a>

    </li>
</ul>

Updated Demo

将div和输入放在链接内的同一行

2 个答案: