html - 带有登录表单的 CSS + HTML 标题

Question

我想不出自己最好的方法来做这个网站的标题，右边是登录表单浅灰色图案仅为标题背景(85px 高容器)，主体背景为白色

我画的是黑线

html {
border-top:7px solid #505559;
}

我这样将容器居中

#header_container {
    margin:0 auto;
    width:970px;
}

Logo 大小为 197x45，提交按钮大小为 79x28

表单元素应该附加到容器的右侧

您如何将提交按钮与白色文本字段的底部对齐

我还想看看您如何放置 html 表单元素，这样我就没有添加自己的失败代码

-------- html代码

<header>
<div id="header_holder">
<h1>logopic</h1>
<div id="login">
<form action="<?php echo $_SERVER['PHP_SELF']; ?>" method="post">
 <div id="username">
  <label for="username">Username</label>
  <input type="text" name="username" maxlength="60">
 </div>

<div id="password">
 <label for="pass">Password</label>
 <input type="password" name="pass" maxlength="10">
 <input type="image" src="img/kirjaudu.png" alt="Submit button">
</div>

</form>
</div>
</div>
</header>

Answer 1

为了对齐它，我将把 form 和 h1 分开，将 h1 向左浮动，将表单向右浮动。

然后在 form 中，将 user 和 password 输入包装在它们的标签中(而不是额外的 div)，然后这些标签可以是制作成 inline-blocks 所以它们与提交按钮并排放置。此外，一旦它们是内联 block ，输入本身就可以制成 block ，将它们放在实际标签文本下方，尽管它们位于 label 元素内，它们会自动与标签关联。

然后给每个输入它自己的类，或者 ID 更好，因为表单元素 names 也应该有相同的 ID ID 和 name 属性在函数形式中起到相同的作用。

提交按钮实际上也应该位于密码 div 之外，无论如何在我的例子中显示标签取代了你的 div 以对字段进行分组，如果你想使用 div 并不重要，但是如果你做的是那些需要 inline blocks

的包装 div

我将如何处理这个问题的 HTML 看起来像这样:

<div id="header">
  <h1>Logo</h1>
  <form id="search">
    <label>Email <input type="text" name="s-user" id="s-user"></label>
    <label>Password<input type="text" name="s-pass" id="s-pass"></label>
    <input type="submit" class="submit" value="Submit">
  </form>
</div>

和一些 CSS，希望能反射(reflect)我上面所说的内容:

html, body {margin: 0; padding: 0;}

#header {
    border-top:7px solid #505559;
    margin:0 auto;
    width:970px;
    background: #eee;
    height: 45px;
    padding: 20px 0;
    font: 12px arial, sans-serif;
}

#header h1 {
    margin-left: 30px; 
    float: left;
    width: 197px;
    height: 45px;
    background: url(http://dummyimage.com/197x45/fe63a5/000&text=LOGOPIC) no-repeat 0 0;
    text-indent: -9999px;
}

#header form {
    float: right; 
    margin-right: 30px; 
    height: 40px; 
    padding-top: 8px;
}

#header form label {
    display: inline-block; 
    margin: 0 2px;
}

#header form input {}

#header form #s-user, 
#header form #s-pass {
    display: block;
    width: 250px;
    border: 1px solid #eee;
    padding: 3px 0 3px 0;
    margin-bottom: -1px;
}

#header form .submit {
    height: 23px;
    vertical-align: bottom;
    background: #d743ae; 
    color: #fff;
    border: 1px solid #ddd;
    -moz-border-radius: 5px;    
    border-radius: 5px;
}

例子:fiddle using above code

提交按钮可以使用 vertical-align:bottom 因为它与 label inline-blocks 在同一行对齐，但是最大的问题是提交按钮的“像素完美”对齐，因为不同的浏览器以不同的方式呈现输入按钮，因此很难使其大小完全相同，但是我是那些不介意像素差异的人之一这里或那里