Question

我写了这个html / css代码，我把它反复排列但是，当我调整大小以响应查看其中一个主要文本信息区域有一个很大的方差！我尝试了边距和填充等一切。这让我很困惑。同样在我的移动版导航栏上，我想要的要逐行显示的项目，但它们不会中断。所有的帮助都是赞赏。这是代码：

HTML：http://pastebin.com/JDzezxVe CSS：http://pastebin.com/9vJvk0Sw

＆＃13;

*{margin: 0px;
    padding: 0px;}
 
body{
    background:#CCC;
    width: 70%;
    margin-left: 20%;
    margin-top: 0px;
    height: 900px;
}
 
.mainHeader{
        padding: 0;
        background:#666;
        height:36px;
        width:100%;
    border-radius: 5px;
    position: relative;
    top: 150px;
    left: -70px;
    box-shadow: 10px 10px 10px #767373;
}
 
.mainHeader nav ul li{
        display:inline-block;
        list-style:none;
        margin: 10px 0px 0px -30px;
    float: left;
    margin-left: 15px;
    position: relative;
    top:  -128px;
    left: 10px;
}
 
.mainHeader nav ul li a{
        text-decoration: none;
    border-radius: 3px;
    color: white;
    padding: 7px 20px 10px 20px;
    margin-right: -15px;
    font-family: 'Eras ITC';
}
 
.mainHeader nav ul li a:hover{
        background: #f18529;
}
 
.mainHeader nav ul .active {
        background: #f18529;
}
 
.mainInfo{
    background:white;
    height: 500px;
    width: 100%;
    position: relative;
    top: 200px;
    left: -70px;
    border-radius: 5px;
    box-shadow: 10px 10px 10px #727272 ;
}
 
.mainInfo .miInfo p{
    font-family: Arial;
    padding:  10px 10px 10px 10px;
    text-align: left;
}
 
.mainHeader .logoArea p{
    position: relative;
    top: -100px;
   
}
 
.mainHeader .logoArea img{
    position: relative;
    top: -130px;
    left: 230px;
   
}
 
@media only screen and (min-width: 150px) and (max-width: 600px) {
    body{
    width: 100%;
}
   
    .mainHeader{
            padding: 0;
            background:#666;
            height:70px;
            width:80%;
        border-radius: 5px;
        position: relative;
        top: 150px;
        left: -70px;
        list-style-type: none;
    }
 
    .mainHeader nav ul li{
        text-align: center;
        height: 100%;
        word-break: break-all;
 
}
 
 .mainHeader nav ul li a{
        width: 100%;
        height: 20px;
        padding:  10px 5px;
        display: inline-block;
        margin: 10px;
       
}
 .mainInfo{
    background:white;
    height: 300px;
    width:80%;
    position: relative;
    top: 200px;
    left: -70px;
    border-radius: 5px;
    box-shadow: 10px 10px 10px #727272;
 
   
}
 
.mainInfo .miInfo{
 
}
 
 
}

＆＃13;

<html lang="en">
    <head>
             <link rel="stylesheet" type="text/css" href="StyleSheet.css">
        <meta charset="utf-8" />
        <title>Website</title>
    </head>
    <body class="body">
        <header class="mainHeader">
           <div class="logoArea">
                <img alt="logo" src="logo.jpg" width="250px" height="120px">
            </div>
            <nav><ul>
                <li><a class="active" href="Index.html">Home<br/></a></li>
                <li><a href="About.html">About<br/></a></li>
                <li><a href="Random.html">Random</a></li>
            </ul></nav>
        </header>
 
        <div class="mainInfo">
            <div class="miInfo">
                <p>This is where you can put some side information about your site! The user will most likely
                see this part second! This is where you can put some side information about your site! The user will most likely
                see this part second! This is where you can put some side information about your site! The user will most likely
                see this part second! This is where you can put some side information about your site! The user will most likely
                see this part second! This is where you can put some side information about your site! The user will most likely
                see this part second! </p>
            </div>
        </div>
 
    </body>
</html>

＆＃13;

Answer 1

它试图回绕.mainHeader nav ul。从float:left;开始.mainHeader nav ul li，您应该全部设定。

我有这个简单的响应式网站即时工作，但我有一个问题

1 个答案: