Question

我有一个搜索页面，其中包含搜索文本框和一个类似于谷歌的“高级搜索”链接。

我无法集中文本框并在文本框右侧显示“高级搜索”。

基本上我希望布局看起来像google http://www.google.com/'>参见此处

这是我的镜头：

            <div style="width:650px; margin-right:auto; margin-left:auto;">
                <%= Html.TextBox("SearchBar")%>
            </div>
            <div style="width:90px; float:right;">                    
                <a href="#" style="text-decoration:none">Advanced Search</a>
            </div>

Answer 1

Google使用表格显示其搜索框。左列和右列的宽度为25％，中间列的宽度为50％。搜索框位于中间列，“高级搜索”位于右列。左栏是空的。

然后将桌子放在中心位置。您的搜索框将居中，“高级搜索”将显示在右侧。

Answer 2

您可以尝试使用每侧90px的包装div和相反的自动边距。 IE

<div class="wrapper">
    <div class="side"></div>
    <div class="textbox"><input type="text" id="myinput"></div>
    <div class="side"></div>
</div>

Answer 3

如果应用以下内容，您可以将样式设置为文本框：

style="position absolute;top:80px;left:90px;"

您明确要显示文本框的位置，以便指定像素，它应位于图层内...它应该适合您

input name="q" class="textbox" tabindex="1" onfocus="if (this.value=='search') this.value = ''" type="text" maxlength="80" size="28" value="search" style="position absolute;top:80px;left:90px">

Answer 4

不是CSS纯粹主义者，我也会走桌子路线，因为我可以在更短的时间内完成，而不是试图让浮动的DIV正确排列。

然而，您可以使用左侧漂浮的3个DIV并适当调整大小以完成相同的操作。

<div style="width: 25%; float: left;">Your content here.</div>
<div style="width: 50%; float: left;">Your content here.</div>
<div style="width: 25%; float: left;">Your content here.</div>

如何在居中的div css旁边放置div

4 个答案: