JSFiddle

Question

我试图为无序列表设置自定义边距，但是，列表仍然停留在div的左上角。基本上，我希望ul从页面右侧约20％。 HTML：

<body>
            <div id="nav"> 
                <span class="nav">
                <ul>
                    <li><a href="#myAnchor" rel="" id="anchor1" class="anchorLink">HOME</a></li>
                    <li><a href="/">WORK</a></li>
                    <li><a href="/">ABOUT</a></li>
                </ul>
            </div>
    </body>

CSS：

body { 
  background: url(img/bg.jpg) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

#nav {
    text-shadow: 2px 2px 2px rgba(60, 60, 60, 1);
    font-family: 'Oswald', sans-serif;
    font-size: 16px;
    background-color: #000000;
    width: 100%;
    top: 0;
    left: 0;
    position: fixed;
}

.nav ul {
    color: #FFFFFF;
    left: 50%;
}

.nav ul li{
    padding-right: 40px;
    display: inline;    
}

.nav ul li a {
    text-decoration: none;
    color: #FFFFFF;
    text-shadow: 2px 2px 2px rgba(60, 60, 60, 1);
}

.nav ul li a:hover {
    text-decoration: overline;
    cursor: pointer;
    color: #FFFFFF;
    text-shadow: 2px 2px 2px rgba(60, 60, 60, 1);
}ode here`

Answer 1

我会让ul浮动到右边：

.nav ul {
    color: #FFFFFF;
    float: right;
    margin-right: 20%;
}

以下是演示：http://jsfiddle.net/wzsq3b5z/

顺便说一下，你的“左：50％;”是没用的，因为你的列表没有置于“绝对”定位。

Answer 2

这里有一些问题。

已经指出了一个问题，即您从未关闭<span>，但此处的主要问题是您尝试使用left属性移动<ul> ，它不会影响初始定位元素。

您需要将其更改为相对，固定或绝对，以便重要。

一个简单的解决方法：将text-align设置为<ul>的右侧。然后，您可以使用margin-right设置您想要<ul>的右侧距离。

JSFiddle

Answer 3

您的HTML似乎有些问题，例如内联元素<span>中已打开的<ul>标记和块元素<span>。我只是冒昧地为你修复了这段代码：

这是jsfiddle：http://jsfiddle.net/o1y9bwuz/

HTML：

<body>
    <ul id="nav">
        <li><a href="#myAnchor" rel="" id="anchor1" class="anchorLink">HOME</a>

        </li>
        <li><a href="/">WORK</a>

        </li>
        <li><a href="/">ABOUT</a>

        </li>
    </ul>
</body>

CSS：

body {
    background: url(img/bg.jpg) no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}
#nav {
    text-shadow: 2px 2px 2px rgba(60, 60, 60, 1);
    font-family:'Oswald', sans-serif;
    font-size: 16px;
    background-color: #000000;
    top: 0;
    right: 20%;
    position: fixed;
    color: #FFFFFF;
}
#nav li {
    padding-right: 40px;
    display: inline;
}
#nav li a {
    text-decoration: none;
    color: #FFFFFF;
    text-shadow: 2px 2px 2px rgba(60, 60, 60, 1);
}
#nav li a:hover {
    text-decoration: overline;
    cursor: pointer;
    color: #FFFFFF;
    text-shadow: 2px 2px 2px rgba(60, 60, 60, 1);
}

无法为<ul> </ul>设置自定义边距

3 个答案:

JSFiddle