垂直对齐几个html表单

时间:2014-10-03 09:46:46

标签: html css

我在我的第一个网站上工作,我是HTML / CSS开发的初学者。

我想要一个由几个formn组成的标题,带有自定义提交按钮,我想要水平对齐它们。我更改了我的css文件中的display参数,但结果永远不正确,哪些参数不好?

我得到了什么:

enter image description here

我想要的是什么:

enter image description here

我的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;
}

0 个答案:

没有答案