2

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

我正在尝试对其进行样式设置，使 h1 位于左侧，输入位于中间，然后我想在右侧有一些链接。

我尝试使用浮动，它只是破坏了一切。

编辑

当我使用 float:left 或 float:right 时，我得到 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;
}
4

5 回答 5

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和linksawidth以防止IE问题。

希望这就是你要找的。

于 2012-04-14T00:47:28.580 回答
1

在这里检查一下，为什么他们的定位在使用浮动时很糟糕。我调整css并查看输出

http://jsfiddle.net/Bq9eq/
于 2012-04-14T00:50:37.423 回答
0

我这样做的方法是首先制作一个大 div，然后将每个字段放入自己的 div 中，这将创建一个内部具有相等间距 div 的大 div，然后在其上执行 css 会更容易。

于 2012-04-15T21:01:13.673 回答
0

我认为您的意思是您希望在标题中有三列。

一种方法是创建三个单独的 div。

<div class="top-container"></div> 
<div class="top-container"></div> 
<div class="top-container"></div>

Clearfix 容器并浮动孩子

#header .top-container{
  width:33%;
  float:left;
}

检查这个小提琴的完整代码：http: //jsfiddle.net/xZC3G/2/

于 2012-04-14T00:55:05.230 回答
-1

不太清楚你的意思，但请记住，每个新 div 都是块级元素，所以它有自己的行，除非你另有说明。尝试使用 display:inline 与您的浮动。

于 2012-04-14T00:37:03.713 回答