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

Answer 2

有些人使用的是style="height:23px"，有些则是height="23"。尝试将它们全部切换为使用 style

Answer 3

从标记中删除width和height属性，并将它们仅添加到css中。

同样在CSS内，你应该使用＆＃39;：＆＃39;而不是＆＃39; =＆＃39;

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

3 个答案: