我在我的第一个网站上工作,我是HTML / CSS开发的初学者。
我想要一个由几个formn组成的标题,带有自定义提交按钮,我想要水平对齐它们。我更改了我的css文件中的display参数,但结果永远不正确,哪些参数不好?
我得到了什么:
我想要的是什么:
我的HTML和CSS代码在以下地址的jsfiddle上:
http://jsfiddle.net/fred37b/wbdLhb9L/10/
HTML:
<header id="head_id">
<div class="element_head">
<?php if (empty($_SESSION[ 'username'])) { if (!isset($_POST[ 'username'])) { ?>
<form id="log_in_form" class="header_form" method="post" action="index.php">
<img name="login_pwd" class="img_login_pwd" src="http://img4.hostingpics.net/pics/741202button01username.png">
<div id="formulaire">
<input type="text" name="username" />
<br />
<input type="password" name="password" />
<br />
<input class="header_form" type="checkbox" name="remember_me" id="remember_me" />
<label for="remember_me">Remember me</label>
<br />
</div>
<!-- <input type="submit" value="Log in" />-->
<input type="hidden" name="type_of_form" value="log_in">
<input type="hidden" name="code" value="0">
<input class="button_log_in" type="submit" name="log_in" value="" />
<br>
</form>
<?php } else { /* connection with my datas base */ } } else { //l 'utilisateur est logge
echo "User :" ;
echo $_SESSION['username '] ;
?>
<form id="log_out_form" method="post" action="index.php">
<input type="submit" class="button_log_out" name="log_out" value="" />
<input type="hidden" name="type_of_form" value="log_out">
<br>
</form>
<?php
}
?>
<form id="sign_in_form" method="post" action="index.php">
<input type="hidden" name="type_of_form" value="sign_in">
<input type="submit" class="button_sign_in" name="sign_in" value="" />
</form>
<form id="search_form" method="post" action="index.php">
<img name="search" src="http://img4.hostingpics.net/pics/399479button04search.png">
<input type="search" name="search" />
<input type="hidden" name="type_of_form" value="search">
<input type="submit" class="button_search" name="sign_in" value="" />
<a href="index.php?type_of_link=new_file"><img name="new_snippet" src="http://img4.hostingpics.net/pics/265686button06newFile.png"></a>
</form>
</div>
</header>
CSS:
.img_login_pwd {
float:left;
border:none;
width: 64px;
/* largeur à spécifier */
height: 64px;
/* longueur à spécifier */
display: inline-block;
}
.button_log_in {
/* float:left; */
background:url(http://img4.hostingpics.net/pics/160128button02login.png);
border:none;
width: 64px;
/* largeur à spécifier */
height: 64px;
/* longueur à spécifier */
cursor: pointer;
display: inline-block;
}
.button_log_out {
background:url(page_element/button_01_log_out.png);
border:none;
width: 64px;
/* largeur à spécifier */
height: 64px;
/* longueur à spécifier */
cursor: pointer;
display: inline-block;
}
.button_sign_in {
background:url(http://img4.hostingpics.net/pics/947651button03signin.png);
border:none;
width: 64px;
/* largeur à spécifier */
height: 64px;
/* longueur à spécifier */
cursor: pointer;
vertical-align: top;
display: inline-block;
}
.button_search {
background:url(http://img4.hostingpics.net/pics/668736button05magnifyingglass.png);
border:none;
width: 64px;
/* largeur à spécifier */
height: 64px;
/* longueur à spécifier */
cursor: pointer;
vertical-align: top;
display: inline-block;
}
.button_new_file {
background:url(http://img4.hostingpics.net/pics/265686button06newFile.png);
border:none;
width: 64px;
/* largeur à spécifier */
height: 64px;
/* longueur à spécifier */
cursor: pointer;
vertical-align: top;
display: inline-block;
}
.element_head {
display: inline;
}
#head_id {
background-color: red;
width: 85%;
height: 20%;
border: 1px solid black;
font-family: Trebuchet MS;
}