Question

我知道这可能很简单，但我似乎在苦苦挣扎！但基本上在我的<header>我希望在左边有我的标识，然后在中间作为搜索引擎的形式（所以在同一行上）。继承了我目前的代码：

<header>
    <div class="image"> <img class="logo" src="Logo.jpg"> </div>
    <div class="form">
        <form id="WhatsHappening" action = "index.php" method="post">
            <input type="text" class="input" name="location" id="location">
            <input type="submit" value="Submit" hidden="true">
        </form>  
    </div>
</header>

和css：

.image{
    float:left;
}

.form{
    float:left;
}

img{
    width: 50px;
    height: 50px;
}

#WhatsHappening input[type="text"] {
    width: 200px;
}

#WhatsHappening {   
    text-align:center;
}

任何帮助都会非常感激！提前谢谢你！

Answer 1

你需要一个父div来保存两个div：

这是一个3 div布局，例如：

<div style="width: 800px;">
 <div style="float: left; width: 300px;">Left Stuff</div>
 <div style="float: left; width: 200px;">Middle Stuff</div>
 <div style="float: left; width: 300px;">Right Stuff</div>
 <br style="clear: left;" />
</div>

Answer 2

您应该将.form{float:left;}更改为text-align: center;

.form
{
    text-align: center;
}

Demo Fiddle

Answer 3

试试这段代码..我觉得很简单:)

<header>
    <div class="image" align="left"> <img class="logo" src="Logo.jpg"> </div>
    <div class="form" align="center" >
        <form id="WhatsHappening" action = "index.php" method="post">
            <input type="text" class="input" name="location" id="location">
            <input type="submit" value="Submit" hidden="true">
        </form>  
    </div>
</header>

如何将与图像位于同一行的表单居中？

3 个答案: