Question

我有一个div，它有一个固定的宽度，然后是一个表格，其中宽度为：auto，表格有2列。我尝试了很多东西，比如100％。唯一可行的解决方案是输入搜索量为150px我不明白。

该表离开了div，如此jsfiddle所示：

<div style="border:1px solid black;border-radius:15px;margin-left:10px;float:left;width:180px;height:26px">
    <table border="0" style="width:auto;height:100%;border-collapse:collapse;table-layout:fixed">
        <tbody><tr>
            <td>
                <img id="SearchIcon" src="/Content/icons-png/search-white.png" width="16" height="16" style="margin-left:5px;margin-top:4px;margin-right:5px">
            </td>
            <td>
                <input id="SearchBox" type="search" style="border:1px solid red;border-radius:0 12px 12px 0;height:100%;width:auto" placeholder="Search">
            </td>
        </tr>
    </tbody></table>
</div>

Example

Answer 1

更改width

中的input

width:auto;

到

width:100%;

那就行了。

Answer 2

input元素具有默认大小。根据浏览器的不同而不同。因此，您必须为input元素赋予宽度，以便可以覆盖它。

将width:100%放入您的输入元素中，它将起作用。

所以你的代码会喜欢这个

<div style="border:1px solid black;border-radius:15px;margin-left:10px;float:left;width:180px;height:26px">
    <table border="0" style="width:auto;height:100%;border-collapse:collapse;table-layout:fixed">
        <tbody><tr>
            <td>
                <img id="SearchIcon" src="/Content/icons-png/search-white.png" width="16" height="16" style="margin-left:5px;margin-top:4px;margin-right:5px">
            </td>
            <td>
                <input id="SearchBox" type="search" style="border:1px solid red;border-radius:0 12px 12px 0;height:100%;width:100%" placeholder="Search">
            </td>
        </tr>
    </tbody></table>
</div>

div中的表格仅在Chrome中脱离div。它适用于所有其他浏览器

2 个答案: