如何使用内联内容生成div？

Question

http://i.imgur.com/37miZ.png这里是一个截图

我试图把它的样式设计成这样，h1将位于左侧，输入在中间，然后我想在右边有一些链接。

我试着用浮子把一切都毁了。

编辑

当我使用浮动:左或浮动:右，我有2个div分开，但定位是糟糕的。

我有一些html：

<div id="container">
            <div id="header">
                <div id="nytm">
                    <h1>New York Tech Map</h1>
                </div>
                <div id="form">
                    <form>
                        <input type="text" name="zip">
                        <input type="submit" value="Search By Zip">
                    </form>
                </div>
                <div id="navlinks">
                </div>
            </div>
</div>

下面是css：

#container {
    min-height: 100%;
    position: relative;
}
#header {
    background: #EDEDED;
    height: 79px;
    border-bottom: 1px solid #666;  
}

#nytm{
    display: inline;
}

#form{
    margin-top: 24px;
    display: inline;
}

#navlinks{
    display: inline;
}

Answer 1

我做这个的方法是先做一个大div，然后把每个字段放到他们自己的div中，这会创建一个大div，里面有等间距的div，然后在上面做css就更容易了。

Answer 2

好的，按照以下步骤执行：

在您的css文件中，放置这个clearfix样式的类：

    .clearfix:after{content:".";display:block;clear:both;visibility:hidden;line-height:0;height:0;}
    .clearfix{display:inline-block;}
    html[xmlns] .clearfix{display:block;}
    * html .clearfix{height:1%;}

    .fr{float:right;display:inline-block;}
    .fl{float:left;display:inline-block;}

下一节需要这个类。

现在，让我们在HTML部分中看看我们需要什么：

    <div class="clearfix container">
        <div class="fl search-zone">
            <!-- YOUR SEARCH INPUT AND BUTTON HERE -->
            <input type="text" /> <button>SEARCH</button>
        </div>
        <div class="fr links">
            <!-- YOUR LINKS HERE -->
            <a href="">LINK 1</a> <a href="">LINK 2</a> <a href="">LINK 3</a>
        </div>
    </div>

• -- clearfix类将帮助您在其中定位任何浮动元素，并且它是跨浏览器解决方案。*强烈建议给予类search-zone和links一个width以防止IE问题。

希望这就是你要找的。

Answer 3

检查这里，为什么他们的位置是可怕的，而使用浮动。我调整css并查看输出

http://jsfiddle.net/Bq9eq/