Question

我希望我的布局网站在左侧内容之间有边距和标题之间的边距 - 导航栏但是空间的颜色不会改变为身体的背景颜色

HTML

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>Template</title>
    <link rel="stylesheet" type="text/css" href="<?php echo base_url();?>css/style.css">
</head>
<body>
    <div id="wrapper">
        <div id="header">
            <h1><p></p></h1>
        </div>
        <div id="nav">
            <ol>
                <li><a href="<?php echo base_url();?>index.php/member">Home</a></li>
                <li><a href="#">About us</a>
                    <ol>
                        <li><a href="#">ประวัติ</a></li>
                        <li><a href="#">ผลงาน</a></li>
                        <li><a href="#">xxxxxx</a></li>
                    </ol>
                <li><a href="#">Contact us</a></li>
            </ol>
        </div>
        <div id="content">
            <div id="left-side">
             aaaaaaaaaaaaaaaaaaaaaaaaa
            </div>
            <div id="right-side">
                <div class="loginbox">
                    <?php echo form_open('login');?>
                        <h2 style="text-align:center;"> Login </h2>
                        <ul id='login'>
                            <li>
                                <span style="margin-right:10px;">Username:</span><br>
                                <input type='text' name='username'>
                            </li>
                            <li>
                                Password:<br>
                                <input type='password' name='password'>
                            </li>
                            <br>
                            <li>
                                <input type='submit' name='btn2' value='Log in'>
                            </li>
                            <li>
                                <br>
                                <?php echo anchor("register/index","สมัครสมาชิก");?>
                            </li>
                            <li>
                                <?php echo anchor("", "ลืมรหัสผ่าน");?>
                            </li>
                        </ul>   
                    <?php echo form_close();?>
                </div>
            </div>

        </div>
        <div id="footer"><p>Footer</p></div>
    </div>
</body>

CSS

 html,body{margin:0px;padding:0px;font-size:13px;}
    body{background:#cceeff;font-family:"verdana"; }
    #wrapper{margin:auto;padding:0px;width:75%;background:#FFF;}
    #header{margin:0px;padding:0px;width:100%;height:18vh;float:left;background:#99d6ff;}
        #header h1{margin:0px;padding:0px;font-size:20px;padding-bottom:10px;}
    #nav{margin:0px;padding:0px;width:100%;float:left;margin-top:10px;background: #80ffe5;}
        #nav ol{list-style:none;margin:0px;padding:0px;}
        #nav ol li{display:block;padding:6px 10px;float:left;position:relative;}
        #nav ol a{display:block;padding:5px 10px;color:#000;text-decoration:none;}
        #nav ol a:hover{background:#f2f2f2;
        -webkit-transition: background-color 0.3s ease-out;
        -moz-transition: background-color 0.3s ease-out;
        -o-transition: background-color 0.3s ease-out;
        transition: background-color 0.3s ease-out;
        }
            #nav ol ol{position:absolute;top:35px;left:0px;display:none;background: #80ffe5;}
                #nav ol ol li{border-bottom:1px;}
    #content{margin:0px;padding:0px;width:100%;display:flex;min-height:70vh;word-break: break-all;}
        #right-side{float:left;margin-left:10px;width:30%;border: solid 1px grey;background:white;}
            #right-side ol{list-style:none;}
        #left-side{float:left;width:70%;border: solid 1px grey;background:white;}
    #footer{float:left;margin:0px;padding:2vh;width:100%;
        -webkit-box-sizing:border-box;
        -moz-box-sizing:border-box;
        box-sizing:border-box;
        background: #99d6ff;
    }
    .loginbox
    {
        background: #9999ff;
        margin: 10px;
        margin-top:20px;
        padding: 5px;
        border-radius: 5px;
    }
    .loginbox ul li
    {
        list-style:none;
        margin-left:-10px;
    }

Answer 1

更改css中的第3行以匹配背景或如下所述，只需将所有背景属性一起删除。

#wrapper{margin:auto;padding:0px;width:75%;background:#cceeff;}

#wrapper{margin:auto;padding:0px;width:75%;}

CSS - 我在布局组件之间建立边距，但空间的颜色不会改变为主体颜色

1 个答案: