Question

我有两个按钮。现在我只能移动所有这些位置，但我想将特定按钮“HOME”向左移动。这是我的HTML代码

    <ul class="fullsize-nav-ul">
       <li class="nav-main-item menu-home">
          <a href="http://atlanticsleeptherapeutics.com/?page_id=11">
             <span>Home</span>
          </a>
       </li>
       <li class="nav-main-item menu-who-we-are">
          <a href="http://atlanticsleeptherapeutics.com/?page_id=15">
             <span>WHO WE ARE</span>
          </a>
       </li>
   </ul>

和我移动这两个按钮的css代码

.fullsize-nav-ul {
 position: relative;
 right: 20px;
 bottom: 150px; 
}

我试过这种方式，但它不起作用

#fullsize-nav-ul li.nav-main-item menu-home a{
 position: relative;
 right: 30px;
}

Answer 1

您在. css课程之前错过了menu-home：

#fullsize-nav-ul li.nav-main-item .menu-home a{
   position: relative;
   right: 30px;
}

Answer 2

这不是很重要，你应该漂浮。不要使用这样的定位，特别是在锚点上。

我附上了一个工作小提琴

http://jsfiddle.net/0gzx2bru/

.fullsize-nav-ul li{
list-style-type:none;
float:left;
padding:10px;
}

Answer 3

在您的示例中，您将选择器从类选择器（.fullsize-nav-ul）更改为ID选择器（#fullsize-nav-ul）。不确定这只是一个错字，但根据你的代码，你想要类选择器。

然后你在（li.nav-main-item .menu-home）中的同一个元素的类之间引入了一个空格，而后者变成了一个后代元素的选择器（虽然你也错过了这个时期，所以也许这只是另一个错字？）。

这应该有效：

.fullsize-nav-ul li.nav-main-item.menu-home a {
    position: relative;
    right: 30px;
}

<强> jsFiddle example

Answer 4

当top设置为right时，我认为您不能使用bottom，left，position或relative声明元素即{position:relative}。

要实现您的目标，您可能需要将position设置为absolute，即{position:absolute}，然后使用top，right， bottom，left值。

古德勒克！

编辑css中另一个元素内的元素

4 个答案: