0

我正在我自己的一个项目中实现 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>
    &nbsp;&nbsp;&nbsp;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>

会员区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>
        &nbsp;&nbsp;&nbsp;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>

成员区域中的所有字段都显示为大于 24 像素。：（ 请帮我！

非常感谢您提前。

4

1 回答 1

0

找出主要错误，我没有在我的 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">
于 2013-04-20T16:06:52.197 回答