0

我正在尝试定位此“关于我”框，但无法将其定位。我可以使用 margin-left 或 margin-right 属性向左或向右移动它，但我无法将它向上或向下移动。我使用 float:right 来定位侧边栏。所以我在我的标题上使用了 clear:both 。但它仍然保持静止。

以下图片将帮助您了解我的问题。

在此处输入图像描述

这个页面的代码在这里（jsFiddle）

<!doctype html>

<html>

<head>
    <meta charset="utf-8">
    <meta name="description" content="description">
    <link rel="stylesheet" media="screen" href="style123.css">

    <!--[if IE]>
    <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->    
    <title>My First Page</title>
</head>

<body>
    <div id="wrapper">
        <ul id="nav">
            <li><a href="#">Home</a></li>
            <li><a href="#">About</a></li>
            <li><a href="#">Work</a></li>
            <li><a href="#">Contact</a></li>
        </ul>

        <div id="box">
            <h3> ABOUT ME </h3>
        </div>
      </div>
</body>
</html>

CSS：

body {
   background: #091A1B;
   color: #544738;
   font-family: helvetica, sans-serif;
}

#nav {
      margin-top: 0px;
      float: right;
}

ul li {
    float: left;
    list-style: none;
    margin-right: 1em; 
}

li a {
    color: #544738;
    text-decoration: none;
    float: left;
    font-size: 25px;
    padding: 12px;
}

li a:hover {
    -webkit-transform: rotate(-10deg) scale(1.2);
    -moz-transform: rotate(-10deg) scale(1.2);
    -o-transform: rotate(-10deg) scale(1.2);
    color: #25296F;
}

#box {
      background-color: black;
      width: 150px;
      height: 38px;
      margin-left: 500px;
      clear: both;
      margin-top: 500px;
    }
4

4 回答 4

0

习惯了这个代码

#box:before, #wrapper:before{
    content:"";
    overflow:hidden;
    clear:both;
    display:table;

}

演示

于 2013-04-25T11:56:09.980 回答
0

您的代码的唯一问题是垂直边距折叠。为了防止它添加以下针对您的包装器 div 的规则就可以了。无需其他更改

#wrapper {
    overflow:hidden;

}

在这里提琴

于 2013-04-25T12:07:58.977 回答
0 
 #box {
position:absolute;

background-color: black;

width: 150px;

height: 38px;

margin-left: 0px;

clear: both;

margin-top: 200px;

}

看看这个演示：给 margin-top 不同的位置和位置变化......

演示：http: //jsfiddle.net/Praveen16oct90/ZFzp7/1/

于 2013-04-25T11:49:18.687 回答
0

我猜这里的问题是浮动元素。要使您的上边距起作用，只需插入一个样式为 [clear:both] 的空 div，如下所示，`

<body>
    <div id="wrapper">
        <ul id="nav">
            <li><a href="#">Home</a></li>
            <li><a href="#">About</a></li>
            <li><a href="#">Work</a></li>
            <li><a href="#">Contact</a></li>
        </ul>
      <div style='clear:both'></div>
        <div id="box">
            <h3> ABOUT ME </h3>
        </div>
      </div>
</body>`
于 2014-02-19T23:56:24.083 回答