固定位置响应居中
比茹姆
我正在尝试使导航居中，但尚未成功。这个想法是导航随着用户滚动页面而移动。它也必须具有响应性，因为应该始终显示导航。所以我想出了这个：
<nav id="nav" class="container">
<ul>
<li><a href="#avaleht" class="avaleht" title="Avaleht" >avaleht</a></li>
<li><a href="#massaazh" class="massaazh" title="Massaaž" >massaaž</a></li>
<li><a href="#kontakt" class="kontakt" title="Kontakt" >kontakt</a></li>
</ul>
</nav>
和CSS：
#nav
{
position: fixed;
}
#nav ul
{
list-style: none;
padding-left: 0;
text-align: center;
}
#nav li
{
display: inline-block;
}
#nav a
{
color: rgb(255,255,255);
font-family: 'Open Sans', sans-serif;
font-weight: 500;
text-transform: uppercase;
font-size: 1.3em;
display: block;
margin-right: 80px;
height: 100px;
width: 100px;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
border-radius: 50%;
line-height: 100px;
}
#nav a.avaleht
{
background: rgb(168,191,18);
}
#nav a.massaazh
{
background: rgb(255,159,0);
}
#nav a.kontakt
{
background: rgb(0,170,181);
}
#nav a:hover
{
text-decoration: none;
background: rgb(66,64,62);
}
这就是我希望它起作用的方式：
非常感谢你。
乔什·克罗泽（Josh Crozier）
只需添加left:0; right:0;到固定#nav元素：
#nav {
position: fixed;
left:0; right:0;
}
然后，删除margin-right最后一个li元素的子锚元素：
#nav li:last-child a {
margin-right:0;
}
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
编辑于
相关文章
Related 相关文章
- 1
固定位置响应居中
- 2
固定位置响应式
- 3
如何使固定位置的元素水平居中
- 4
如何使固定位置的元素水平居中
- 5
将div以固定位置水平居中
- 6
响应固定位置侧div
- 7
响应式固定位置侧div
- 8
保持背景图片固定位置和居中
- 9
在固定位置Div垂直居中放置图像
- 10
对齐固定位置的元素以使其水平居中
- 11
无法将div水平居中，涉及固定位置
- 12
如何将<div>居中并使用固定位置？
- 13
固定位置的横幅-较小设备上的响应问题
- 14
Boostrap大图-固定位置和响应式
- 15
按钮在固定位置div内无响应
- 16
使css圆圈在图像底部响应并处于固定位置
- 17
元素的固定位置？
- 18
将元素居中在可调整大小的背景上的固定位置
- 19
如何以特定的宽度和固定位置将div居中？
- 20
将div居中放置在屏幕中央的固定位置中
- 21
具有固定位置的可调整大小的居中div标签
- 22
如何在固定位置div中垂直居中显示文本范围？
- 23
有最小宽度时，如何使元素居中（水平）固定位置？
- 24
如何将div以特定宽度和固定位置居中？
- 25
可调整大小的居中div标签，具有固定位置
- 26
不能将固定位置的弹性盒居中并留有空白：0自动
- 27
DIV位置：固定；水平居中
- 28
固定位置不可滚动
- 29
使iframe /表格固定位置
我来说两句