0

所以我必须使用 HTML 和 CSS 为学校制作网页。当我在代码预览中查看它时，一切似乎都 100% 正常，但是一旦我把它放在我的服务器上，导航栏就不再与我的主体对齐

这是我的 CSS

body {
    background-color:#2AA890
}

nav {
    margin: auto;
    width: 1000px;
}

ul {
    padding: 0px;
    margin: 45px;
    list-style: none;
}

li a:link, li a:visited, li.selected {
    float: left;
    width: 110px;
    line-height: 3em;
    background-color: #e9e9e9;
    color: #000000;
    font-size: 16px;
    text-align: center;
    text-transform:capitalize;
    text-decoration: none;
    border-right: 3px #ba0000 solid;
}

li:last-child a {
    width: 110px;
    border-right: 0px #6e2525 solid;
}

.head {
    text-align: left;
    padding: 10px 10px 10px 10px
}

.box {
    margin-left: 185;
    width: 882;
    height: 450;
    background-color: #acacac;
    text-align: left;
    padding: 30px 10px 10px 10px
}

.pic1 {
    width:900px;
}

.pic1 img {
    float:right;
}

.pic1 p {
    text-indent: 40px;
    line-height: 1.5em;
    font-family: sans-serif;
    font-size: 17px; 
    margin-right:400px;
}

.head {
    padding: 25px 0px 0px 45px  
}

.pic1 p {
    padding: 0px 5px 10px 8px
}

.pic1 img{
    padding: 30px 20px 20px 10px;
}

这是我的 HTML

<! DOCTYPE html>
<html>
<head>
  <title>Home</title>
  <link rel="stylesheet" type="text/css" href="normalize.css">
  <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
  <nav>
    <ul>
      <li><a href="index.html">Home</a></li>
      <li><a href="Supplies.html">Supplies</a></li>
      <li><a href="Step_1.html">Step 1</a></li>
      <li><a href="Step_2.html">Step 2</a></li>
      <li><a href="Step_3.html">Step 3</a></li>
      <li><a href="Step_4.html">Step 4</a></li>
      <li><a href="Step_5.html">Step 5</a></li>
      <li><a href="Step_6.html">Step 6</a></li>
    </ul>
  </nav>

  <div class="box">
    <div class="pic1">
      <img src="drew_brophy.jpg" alt="Art" title="Drew Brophy" width="480" height="374">
      <div class="head">
        <h2>How to Paint a Surfboard</h2>
      </div>
      <p>The surfboard, one of the most fun toys around.  There is just one problem with it.  The majority of them are plane white.  There is no color and adding some stickers isn't a true way to express yourself!  With a little time and some common items from your garage or hardware, you can make it so much better.  You don't have to be a great artist or have lots of money to truly make that board your own.  This site is a simple guide with some tips and tricks for painting your surfboard.  When the waves aren't breaking and your looking at that board in the corner of your room, take some time and change it up! </p>
      </div>
    </div>
  </body>
</html>
4

2 回答 2

1

在您的 CSS 中，请为“box”类的高度、宽度、高度添加“px”。对于 Nav UL，删除边距。

样本：

http://jsfiddle.net/mrUqK/

margin-left: 185px
width: 882px
height: 450px
于 2013-10-17T21:33:24.960 回答
0

您好，请查看您的 ul 中的边距，并在 .box 类中设置相等的左边距。

ul {
  margin:45px 0px;
}
.box {
  margin-left:0px;
}

在这里查看http://jsfiddle.net/

于 2013-10-17T22:05:53.147 回答