css元素無法獲得相同高度

我給出了所有元素「23px」的高度，但正如您在附加圖像中看到的那樣，有些元素小於「23px」。css元素無法獲得相同高度

<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

請讓我知道什麼是錯。

在此先感謝。

來源

2012-03-08 WindStory

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

來源

2012-03-08 13:44:34

我更正爲「height：23px;」。在你改變css之後，元素的順序是相反的。 – WindStory 2012-03-08 17:29:00

是的，因爲浮動：正確;行爲。從#login_main_ul li中刪除float：並將其添加到#login_main_ul只，我認爲這將做的伎倆。 – 2012-03-09 13:15:07

Attila Fulop /是的訂單回來了，但高度問題是相同的。 – WindStory 2012-03-10 02:03:44

在一些你正在使用style="height:23px"而在其他height="23"改變。嘗試將它們全部切換爲使用樣式

來源

2012-03-08 13:46:27 Timeout

謝謝，我糾正了。 – WindStory 2012-03-08 17:29:24

從標記中刪除寬度和高度屬性，並將它們添加到CSS中。

也在CSS內部，你應該使用'：'而不是'='

來源

2012-03-08 13:51:50 Abhidev

謝謝，我糾正了。 – WindStory 2012-03-08 17:29:35

css元素無法獲得相同高度

回答

相關問題