0 
<html>
<head>
<style type="text/css">
         #wholeborder{
        background-color : #f2f2f2;
        border-radius:5px;
        border:1px solid #222;
        resize:both;
        width:700px;
        height:320px;
        overflow:auto;

        }

        #navigatorForLinkedIN{
         height:70px;
        }
        ul#breadcrumbs{
            list-style:none;
            /* optional */
            margin:100px;
            padding:10px 2px 10px 10px;
            background:#f2f2f2;
            width:500px;
            height:30px;
            border-radius:5px;
            border:1px solid #222;
            -moz-box-shadow:0 0 3px 0 #000;

        }
        ul#breadcrumbs li{
            float:left;
            background:;
            height:30px;
            padding:0 23px 0 10px;
            text-align:center;
            text-decoration:none;
            text-color:#7a7a7a;
            line-height:32px;
        }
        ul#breadcrumbs li.active{
            background:url(../images/greenNav.png)no-repeat right;
            color:#fff;
        }
        ul#breadcrumbs li a{
            display:block;
            text-decoration:none;
            color:#2d2d2d;
            line-height:32px;
            text-shadow:0 0 1px #222;
        }
        ul#breadcrumbs li a:hover{
            color:#000000;
            background: url(../images/greenNav.png);
        }

    </style>

</head>
<body>
<div class="wholeborder" id="wholeborder">
            <div class="navigatorForLinkedIN" id="navigatorForLinkedIN">
                <ul id="breadcrumbs">
                    <li class="active"><a href="">Connect with LinkedIn</a></li>
                    <li><a href="">Invite Friends</a></li>
                    <li><a href="">Complete Profile</a></li><a href="">
                </a></ul><a href="">
             </a></div><a href="">
                </a><div class="linkedInLoginBox"><a href="">
                    <div class="head">
                        Discover contacts that can help you land your next job
                    </div>
                    </a><div class="body"><a href="">
                        </a><a class="sn-in" href="" title="Sign into LinkedIn" id="sn-lk-sign" rel="nofollow"><span class="sn-in-sign-span">Sign into LinkedIn</span></a>
                        <div class="disclaimer">
                        All information and activity will be kept private. <a href="" target="_blank">Learn More</a>
                        </div>
                    </div>
                </div>
            </div>

</body>
</html>

这是我的html页面

4

5 回答 5

2

边距为 100 像素，这就是将其向下推的原因

        ul#breadcrumbs{
        list-style:none;
        /* optional */
        margin:100px;
        padding:10px 2px 10px 10px;
        background:#f2f2f2;
        width:500px;
        height:30px;
        border-radius:5px;
        border:1px solid #222;
        -moz-box-shadow:0 0 3px 0 #000;

    }

改变这个边距，100 向下推，你可以使用类似的东西。

margin-top:;
margin-left:;
margin-right:;
margin-bottom:;
于 2013-09-25T09:17:42.557 回答
1

您在 ul#breadcrumbs 上有一个样式：margin:100px;您可以将其更改为margin:0 100px 100px. 不过，您可能还想设置 body 和 html 容器的边距和填充：

html, body{
  margin:0;
  padding:0;
}
于 2013-09-25T09:19:00.177 回答
1

我更新了你的小提琴，你可以从链接中查看。

更新代码：

/* optional */
margin:10px 100px;

原来的margin:100px意思是从四面八方100px。但是10px 100px意味着，顶部/底部：10px | 左/右：100px；

您更新的小提琴：http: //jsfiddle.net/sLV5h/2/

于 2013-09-25T09:20:32.730 回答
1

检查 Js 小提琴

http://jsfiddle.net/Ydbre/

删除margin:100px于ul#breadcrumbs

于 2013-09-25T09:22:39.393 回答
1

就像在小提琴http://jsfiddle.net/sLV5h/1/中说的：

答案是改变

ul#breadcrumbs{
    list-style:none;
    /* optional */
    margin:100px;                 <-------This Line
    padding:10px 2px 10px 10px;
    background:#f2f2f2;
    width:500px;
    height:30px;
    border-radius:5px;
    border:1px solid #222;
    -moz-box-shadow:0 0 3px 0 #000;

}


    ul#breadcrumbs{
        list-style:none;
        /* optional */
        margin:0px 100px 100px 100px;     <----- by this (or something else)
        padding:10px 2px 10px 10px;
        background:#f2f2f2;
        width:500px;
        height:30px;
        border-radius:5px;
        border:1px solid #222;
        -moz-box-shadow:0 0 3px 0 #000;

    }

（向黑暗骑士致敬）

于 2013-09-25T09:22:54.870 回答