我正在我自己的一个元素中实现 UI 设计，看起来我在 CSS 方面遇到了很大的问题。
据我所知，我已经为输入类型指定了样式:文本、按钮以 CSS 接受的方式:
body input[type=text]{
border:1px solid #208278;
height:24px;
padding-left: 5px;
}
body button{
background-color: #279A8F;
border:0px;
color:white;
height:24px;
}
body input[type=password]{
border:1px solid #208278;
height:24px;
padding-left: 5px;
}
body input[type=submit], input[type=button]{
background-color: #279A8F;
border:0px;
color:white;
height:24px;
}
在登录页面上，字段显示高度为24px，而登录后，我看到所有字段都更大，高度超过24px。我没有任何线索。 一点是在登录后，这些字段出现在一个容器中，该容器有一些填充和边距，但我看不出这会如何影响这些字段。这个问题一直让我发疯，有人可以提供一些见解吗？
放置表单域的容器如下:
#container{
width:1100px;
margin: 0 auto;
}
#leftbar{
float:left;
width:200px;
font-size:13px;
background-color:#237971;
color:white;
padding:4px;
}
#rightbar{
float:right;
width:200px;
font-size: 13px;
background-color:#237971;
color:white;
padding:4px;
}
#middlebar{
padding:5px;
margin-left:3px;
margin-right:3px;
float:left;
width:660px;
border:1px solid black;
}
登录页面HTML代码:
<html>
<head>
<link rel=stylesheet type=text/css href="<?php echo base_url('layout/layout.css');?>" media="all">
<title>
My Page
</title>
</head>
<body>
<div id=header>
Welcome
</div>
<?php echo validation_errors(); ?>
<?php echo form_open('login/verify'); ?>
<table>
<tr>
<td align="right"><label for="email">E-Mail:</label></td>
<td align="left"><input type="text" name="email" id="email" value="<?=set_value('email')?>"></td>
</tr>
<tr>
<td align="right"><label for="password">Password:</label></td>
<td align="left"><input type="password" name="password" id="password"></td>
</tr>
<tr>
<td></td>
<td align="left"><input type="submit" name="submit" value="Login"></td>
</tr>
</table>
</form>
<br/>
<a href="<?php echo base_url();?>signup/signup">Sign up</a> for a new account<br/>
</body>
</html>
成员(member)专区HTML代码:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script src="<?php echo base_url('js/jquery-1.9.1.js'); ?>"></script>
<script src="<?php echo base_url('js/jquery-ui/js/jquery-ui-1.10.2.custom.js'); ?>"></script>
<link rel="stylesheet" type="text/css" href="<?php echo base_url('js/jquery-ui/css/customjqueryui/jquery-ui-1.10.2.custom.css');?>">
</script>
<link rel=stylesheet type=text/css href="<?php echo base_url('layout/layout.css');?>">
<title>Welcome</title>
</head>
<body>
<div id=container>
<div id=header>
Members area
</div>
<div id="leftbar">
<div class=content><a href="<?php echo base_url();?>user/home/logout">Logout</a></div></div>
<div id="rightcontainer">
<div id="middlebar">
<?php echo validation_errors();?>
<?php echo form_open_multipart('home/create/validate'); ?>
<table>
<tr>
<td align="right"><label for="fullname">full Name:</label></td>
<td align="left"><input type="text" name="fullname"></td>
</tr>
<tr>
<td></td>
<td><input type="submit" name="finish" value="Finish"></td>
</tr>
</table>
</div>
<div id="rightbar"></div>
</div>
</div>
</body>
</html>
成员(member)区所有字段显示大于24px。 :( 请帮助我!
非常感谢您。
最佳答案
找出主要故障， 我没有在我的 HTML 代码中使用以下语句标准化登录页面:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
关于HTML 文本字段和按钮显示比指定的大，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/16020367/