Блог

Я не могу представить себе лучший способ сделать это заголовок сайта с формой входа в систему справа Светло-серый шаблон — это только фон для заголовка (контейнер высотой 85 пикселей), основной фон белый

Я сделал темную линию с

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

я отцентрировал контейнер следующим образом

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

Размер логотипа 197×45 и размер кнопки отправки 79×28

Элементы формы должны быть прикреплены к правой стороне контейнера

Как бы вы выровняли кнопку отправки с нижней частью белого текстового поля

Я также хотел бы посмотреть, как вы разместите элемент 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>
  

чтобы выровнять это, я бы разделил form и h1 , переместив h1 влево, а форму вправо.

затем внутри form оберните входные данные user и password внутри их меток (вместо дополнительного div), затем эти метки можно преобразовать в inline-blocks , чтобы они располагались рядом с кнопкой отправки. Также, как только они становятся встроенными блоками, сами входные данные могут быть преобразованы в блоки, которые помещают их под фактическим текстом метки, хотя, находясь внутри label элемента, они автоматически ассоциируются с меткой.

Затем присвоите каждому входному сигналу его собственный класс, или лучше идентификатор, поскольку элемент формы names также должен иметь тот же идентификатор, ID и name атрибуты вроде как служат той же цели в функциональных формах.

Кнопка отправки действительно должна находиться за пределами div пароля, в любом случае, в моем случае показанные метки занимают место ваших divs с целью группировки полей, на самом деле не имеет значения, хотите ли вы использовать divs, но если вы это сделаете, это будут те divs-оболочки, которые должны быть inline blocks

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, который, надеюсь, отражает то, что я сказал выше:

 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/000amp;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;
}
  

Пример: настройка с использованием приведенного выше кода

кнопка отправки может использоваться, vertical-align:bottom поскольку она выравнивается по той же строке, что и label inline-blocks , однако самая большая проблема заключается в «идеальном по пикселям» выравнивании кнопки отправки, поскольку разные браузеры отображают кнопки ввода по-разному, поэтому довольно сложно добиться, чтобы они были точно такого же размера, однако я один из тех, кто не возражает против разницы в пикселях здесь или там

Я бы выровнял элементы вашей формы вправо, например, сделал что-то вроде этого:

 input.yourinputclass { float: right; margin-right: 25px; }
  

а затем просто проделайте то же самое с кнопкой отправки. Это должно сработать. Помните, что вы можете назначить класс / идентификатор практически чему угодно! Дайте мне знать, если вам понадобится дополнительная помощь!

(Я не понимаю ваш вопрос на 100%)

Я бы выровнял форму по правой стороне заголовка:

 form.formclass{
     float:right;
     margin:10px 0 0 0; 
}
  

А затем используйте float и margin для выравнивания элементов формы:

 form.formclass input.inputclass{
     width:100px; height:20px;     
     float:left;
     margin:0 10px 0 0;
}
form.formclass input.buttonclass{
     width:80px; height:20px;     
     float:left;
}