Question

我有这个HTML：

<div style="float: left; width: 600px; overflow: hidden;">
    <span class="text_vert"> Select Countries : </span><br />
    <div style="float: left;">
        <s:select style="width: 200px; height: 300px;" onchange="reload()"
             headerKey="-1" headerValue="Country Select" list="couList"
             listKey="idCountry" listValue="label" id="countryId" multiple="true"
             name="countryId">
        </s:select>
    </div>
    <span class="text_vert"> Select Languages : </span><br />
    <div style="overflow: hidden; position:relative;">
        <s:select style="width: 200px; height: 300px; overflow: hidden;"
             headerKey = "-1" headerValue="Language Select" list="langList"
             listKey="id" listValue="label" id="langId" multiple="true"
             name="langId">
        </s:select>
    </div>
</div>

我查看了许多教程，但无论我做什么，我总能得到类似的结果：

Screenshot

如何将这两个元素对齐在一行中，所以第二个列表不在第一个下面？

Answer 1

试试这个：

<div style="float: left; width: 600px; overflow: hidden;">
    <div style="float: left;">
    <span class="text_vert"> Select Countries : </span><br />
        <s:select style="width: 200px; height: 300px;" onchange="reload()"
             headerKey="-1" headerValue="Country Select" list="couList"
             listKey="idCountry" listValue="label" id="countryId" multiple="true"
             name="countryId">
        </s:select>
    </div>

    <div style="float: left;">
        <span class="text_vert"> Select Languages : </span><br />
        <div style="overflow: hidden; position:relative;">
            <s:select style="width: 200px; height: 300px; overflow: hidden;"
                 headerKey = "-1" headerValue="Language Select" list="langList"
                 listKey="id" listValue="label" id="langId" multiple="true"
                 name="langId">
            </s:select>
        </div>
    </div>
</div>

有关更多解释：您的float:left应该包含应该位于同一Y的所有HTML。

如何使这两个div彼此相邻？

1 个答案: