水平控制列表项的位置答案

【问题标题】：Controlling the position of list items horizontally水平控制列表项的位置
【发布时间】：2012-11-27 02:30:10
【问题描述】：

我有一个<ul> 的项目，它们在悬停时变得更大（带有动画）。现在我已经让它们位于屏幕的右侧（使用 CSS right:0em 用于 <li> 类），并且我已将 <li> 的位置设置为固定，以便只有它会向左移动随着它的增长，所有的对象都将保持在右侧。问题是，因此，当我将鼠标悬停在它上面时，下一个项目会在它“下方”。我该如何改变呢？（也许有办法只控制悬停时<li> 的水平位置属性？）

代码：

http://jsfiddle.net/KBprd/2/

【问题讨论】：

您应该提供一个 JSFiddle 来说明您所拥有的内容，并更清楚地描述您想要实现的目标。我假设当您将鼠标悬停在 LI 上时，您希望兄弟 LI 向右移动，这样它们就不会重叠？不使用相对定位，您可以只浮动 LI，它们会在宽度扩展时相互推动。
摆弄代码：jsfiddle.net/KBprd/2

标签： html css position html-lists css-position

【解决方案1】：

没有任何代码来启动它有点难以帮助。但根据我收集到的信息，您希望所有项目都与菜单右侧齐平；只有“悬停”的元素从容器的右侧移开。我已经拍了一个如何做到这一点的例子。如果这不是您想要的，请在 cmets 中提供更多代码或详细信息，我们可以从那里开始......

Here is the updated Fiddle

CSS：

.navigation{
    position:fixed;
    z-index:1;
    top:3em;
    right:0em;

}
.navigation li.slide{
    color:#000000;
    display:block;
    padding: 0 10px;
    line-height:30px;
    margin-bottom:2px;
    font-weight:light;
    background:#00C9FF;
    -webkit-transition: all .2s ease-in-out;
    text-align:right;
    width:53px;
    float:right;

}
.navigation li:hover,.active{
    font-size:25px;
    cursor:pointer;
    width:100px!important;
    background:#5C0CE8;
}
.navigationClear {
    clear:both;
    height:1px;
     margin-bottom:-1px;  
}

HTML：

<ul class="navigation">
        <li data-slide="1" class="slide">Slide 1</li>
        <li class="navigationClear"></li>
        <li data-slide="2" class="slide">Slide 2</li>
        <li class="navigationClear"></li>
        <li data-slide="3" class="slide">Slide 3</li>
        <li class="navigationClear"></li>
        <li data-slide="4" class="slide">Slide 4</li>
        <li class="navigationClear"></li>
</ul>

【讨论】：

这里有一个代码：jsfiddle.net/KBprd/2，您添加明确
s 的解决方案似乎不起作用。另请注意，

请不要推荐那种臃肿的代码。有更好的方法可以做到这一点，然后有这么多不必要的 li 与 clear 类

@IddoGino 我已经更新了代码和小提琴，希望对您有所帮助！

@Andy 如果你要提供这样的反馈，你应该用你改进的代码建议来支持它。谢谢。

@TNCodeMonkey 好的 - 我会推荐一些更干净的东西，比如：jsfiddle.net/j7EeE

【解决方案2】：

您的悬停元素隐藏下面的元素的原因是因为您已将“位置：固定”赋予悬停元素。我通过给 ul 元素一个宽度来解决您的问题，以便 li 元素不会排列。我还删除了悬停元素的固定位置。然后右浮动里。这样你也不需要在每个元素之后加上“clearNavigation”。

这是你的小提琴代码。

<ul class="navigation">
    <li data-slide="1">Slide 1</li>
    <li data-slide="2">Slide 2</li>
    <li data-slide="3">Slide 3</li>
    <li data-slide="4">Slide 4</li>

.navigation{
position:fixed;
z-index:1;
top:3em;
right:0em;
width:53px;
} 

.navigation li{
color:#000000;
display:block;
padding: 0 10px;
line-height:30px;
margin-bottom:2px;
font-weight:light;
background:#00C9FF;
-webkit-transition: all .2s ease-in-out;
text-align:right;
width:53px;
position:relative;
right:0em;
float:right;
}

.navigation li:hover,.active{
font-size:25px;
cursor:pointer;
width:100px!important;
background:#5C0CE8;
right:0em;
}

【讨论】：