0

视频.html

<!DOCTYPE html> 
<html>
    <head>
        <link rel="stylesheet" type="text/css" href="style.css">
    </head>
    <body>
        <div class="headerBar">
           <div class="searchForm">
                <form id="search" action="" method="get" target="_blank">
                    <input id="vb_yt_search-term" name="search_query" type="text" maxlength="128" />
                    <select name="search_type">
                    <option value="sAll">All</option>
                    </select>
                    <input type="submit" value="Search" />
                </form>
            </div>
        </div>
    </body>
</html>

样式.css

.headerBar {
    background-color: #f1f1f1;
    width: 100%;
    height: 44px;
    border: 0px;
    padding:0px;
    margin:0px;
    position:fixed;
    top:0;
    left:0;
}

.searchForm {
    text-align: center;
    border: 0px;
    width: 100%;
    vertical-align: middle;
    position: relative;
}

代码：

这是供您尝试的代码。

问题一：

如何使用 CSS 在 headerBar 中垂直居中表单（文本框、组合框和按钮）？我想坚持<div>而不是<table>如果可能的话。我希望它动态居中，这样如果页面重新调整大小，它将重新居中......基本上它不能用 px 硬编码。

问题2：

如何再次使用<div>标签添加更多元素，以便项目不会居中，但分别约为 1/4 和 3/4。举个例子，图片中的顶部栏是 YouTube.com。第二，是我的代码。我想将对象放置在 YouTube 徽标所在的位置。 例子

问题3：（奖金）

这不重要，只是额外的。在上面显示的图片中，是否可以在我的表单上获得确切的搜索栏和搜索按钮，但允许它具有我想要的任何功能？

4

1 回答 1

0

问题一：

从 中删除高度div.headerBar，这样它将随着输入的大小而变大。

如果你想要一个高度，那么不要使用高度。使用行高：

div.headerBar { line-height: 44px; }

问题2：

<div class="wrap">
    <div class="left"></div>
    <div class="mid"></div>
    <div class="right"></div>
    <div class="clear" />
</div>


.wrap { width: 100%; }
.left { float: left; width: 25%; }
.mid { float:left; width: 50%; }
.right { float:left; width: 24%; }
.clear { clear: both; }

检查小提琴：http: //jsfiddle.net/WHXnW/2/

更新小提琴：http: //jsfiddle.net/WHXnW/4/

现在这更接近你想要的。只需使用样式即可获得所需的样式。

于 2013-08-01T21:35:11.920 回答