Css 如何将固定图元放置在居中容器旁边
我想将固定菜单栏放置在居中的容器旁边,但它的位置相对于视图端口而不是容器,因此我无法将其保持在容器旁边 在容器旁边放置固定元件的最简单/最干净的方法是什么 这是我的测试: HTML:Css 如何将固定图元放置在居中容器旁边,css,css-position,Css,Css Position,我想将固定菜单栏放置在居中的容器旁边,但它的位置相对于视图端口而不是容器,因此我无法将其保持在容器旁边 在容器旁边放置固定元件的最简单/最干净的方法是什么 这是我的测试: HTML: <div id="container"> <header> <hgroup> <h3>TIA1</h3> <h1>Contreformes</h1>
<div id="container">
<header>
<hgroup>
<h3>TIA1</h3>
<h1>Contreformes</h1>
</hgroup>
</header>
<nav>
<ol>
<li><a href="#">Grilles</a></li>
<li><a href="#">Contreformes</a></li>
<li><a href="#">Ligne de base</a></li>
</ol>
</nav>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Esse veritatis non autem blanditiis quo rerum sint quasi architecto quibusdam rem. Quibusdam dolores aliquid eum qui impedit architecto ipsum repellendus illum!</p>
</div>
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
}
body {
background: black;
color: white;
font-size: 100%;
font-family: "adelle", Helvetica, serif;
}
a {
color: white;
text-decoration: none;
display: block;
width: 100%;
margin-bottom: 0px;
font-size: 16px;
text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.8);
padding: 8px ;
border-bottom: 2px solid black;
-webkit-transition: all 0.1s ease-out;
-moz-transition: all 0.1s ease-out;
-o-transition: all 0.1s ease-out;
-ms-transition: all 0.1s ease-out;
transition: all 0.1s ease-out;
}
a:hover {
background: rgba(223, 207, 191, 0.4);
padding-left: 10px;
}
ol {
color: rgba(223, 207, 191, 0.8);
position: relative;
list-style-position: inside;
padding: 0px;
width: 139px;
font-size: 14px;
background: rgba(223, 207, 191, 0.15);
position: relative;
float: left;
}
#container {
position: relative;
margin: 0 auto;
width: 960px;
background: rgba(34, 34, 34, 1.0);
height: 900px;
}
h1, h3 {
text-align: center;
font-weight: normal;
margin: 0px;
}
h3 {
padding-top: 15px;
}
h1 {
padding-bottom: 35px;
}
这其实很容易做到。您所需要做的就是对
nav
元素的定位使用一些数学知识。现场演示:
显然,您的布局选择会导致较小屏幕出现问题,因为导航可能部分或完全隐藏在视图之外。使用浮动。在这种情况下。。菜单栏向左浮动,菜单栏向右浮动content@DhruvenkumarShah不能浮动固定元素。好的,可以使用硬像素值吗?我的意思是这是一个糟糕的做法,或者使用twitter引导layout@JOPLOmacedo就在它旁边。@DhruvenkumarShah是的,我用的是像素。嗯,我尽量让它简单。
nav{
width: 139px;
position: fixed;
left: 50%;
margin-left: -619px; /* 480(half width of 960px container) + 139(width of nav) */
}