css 元素无法获得相同的高度

Question

我给所有元素的高度设置为“23px”，但是正如您在附图中看到的，有些元素的高度小于“23px”。

    <style type="text/css">
        #login_main { display: inline; list-style-type:none; }
        #login_main_ul { margin: 0px; padding: 0px; list-style: none;  height=23px; float: right; vertical-align: middle;}
        .login_main_item {border: 1px solid red;  float: left;}
    </style>


    <form name="fhead" method="post" onsubmit="return fhead_submit(this);" autocomplete="off" style="margin:0px;">
    <input type="hidden" name="url" value="<?=$outlogin_url?>">
    <div id="login_main" style="width:100%; ">
        <ul id="login_main_ul">
         <li class="login_main_item" style="width:35px; height:23px;"><img src="<?=$outlogin_skin_path?>/img/login_id.gif" width="35" height="23"></li>
         <li class="login_main_item" style="width:106px; height:23px;" colspan="2" align="center"><input name="mb_id" type="text" class=ed size="12" maxlength="20" required itemname="ID" value='ID' onMouseOver='chkReset(this.form);' onFocus='chkReset(this.form);'></li>
            <li class="login_main_item" width="35" height="23"><img src="<?=$outlogin_skin_path?>/img/login_pw.gif" width="35" height="23"></li>
            <li class="login_main_item" id=pw1 width="106" height="23" colspan="2" align="center"><input type="text" class=ed size="12" maxlength="20" required itemname="PassWord" value='PassWord' onMouseOver='chkReset(this.form);' onfocus='chkReset(this.form);'></li>
            <li class="login_main_item" id=pw2 style='display:none;' width="106" height="23" colspan="2" align="center"><input name="mb_password" id="outlogin_mb_password" type="password" class=ed size="12" maxlength="20" itemname="PassWord" onMouseOver='chkReset(this.form);' onfocus='chkReset(this.form);' onKeyPress="check_capslock(event, 'outlogin_mb_password');"></li>
            <li class="login_main_item" width="24" height="23" rowspan="2" align="center"><input type="image" src="<?=$outlogin_skin_path?>/img/login_button.gif" width="24" height="23"></li>
            <li class="login_main_item" ><input type="checkbox" name="auto_login" value="1" onclick="if (this.checked) { if (confirm('auto login?')) { this.checked = true; } else { this.checked = false; } }"></li>
            <li class="login_main_item" style="padding-left:5px;"><img src="<?=$outlogin_skin_path?>/img/login_auto.gif" width="35" height="23"></li>
            <li class="login_main_item" style=" padding:0 0 0 2px;">
                <!-- <a href="javascript:win_password_forget();"><img src="<?=$outlogin_skin_path?>/img/login_pw_find_button.gif" width="90" height="23" border="0"></a> -->
                <a href="javascript:win_password_lost();"><img src="<?=$outlogin_skin_path?>/img/login_pw_find_button.gif" width="90" height="23" border="0"></a>
        </li>
        <li class="login_main_item" style=" padding:0 0 0 2px;">
            <a href="<?=$g4[bbs_path]?>/register.php"><img src="<?=$outlogin_skin_path?>/img/login_join_button.gif" width="69" height="23" border="0"></a>
            </li>
        </ul>
     </div>
    </form>        

图像链接 - http://i.imgur.com/YJxBH.jpg

请让我知道哪里出了问题。

提前致谢。

Answer 1

试试 height: 23px; 而不是 height=23px;

另请注意，如果元素有边框，也会进行计算。

更新:

您可能还想将 #login_main_ul 更改为 #login_main_ul li

#login_main {
         display: inline;
         list-style-type:none;
        }
#login_main_ul li {
         margin: 0px;
         padding: 0px;
         list-style: none;
         height:23px;
         float: right;
         vertical-align: middle;
         }
.login_main_item {
         border: 1px solid red;
         float: left;
         }