是否可以仅使用CSS将元素水平放置在一个元素上并垂直放置到另一个元素上? 我正在尝试向导航栏添加下拉菜单。但是,子菜单未正确对齐。 我想定位元素A,使其左边缘与元素B的左边缘对齐,但我希望元素A的上边缘与元素C的下边缘对齐。
基本上,我希望它在标题下,与列表元素(图像编辑)对齐:
我有以下代码:
#header{
padding: 0.125em;
background: #eee; /* Styling for clarity */
}
nav{
display: inline; /* Makes nav inline */
}
h1{
display: inline; /* Makes the main title inline */
}
#header ul{
padding:0; /* Clears the space around the list */
display: inline; /* Makes lists inline */
}
#header li{
display: inline; /* Makes list items inline */
list-style-type: none; /* Removes bullets */
}
#header ul>li>.submenu>li{
display: block; /* Makes submenu list items behave normally */
}
#header ul>li>.submenu{
display: none; /* Hides the submenu */
position: absolute; /* Enables positioning */
top: 100%; /* Position directly under - SHOULD BE UNDER HEADER */
left: 0; /* Align left edge - SHOULD BE ALIGNED WITH ANCESTOR LIST ITEM */
background: #ccc; /* Styling for clarity */
}
#header ul>li:hover>.submenu{
display: block; /* Shows the submenu */
}

<header id="header">
<nav>
<ul>
<li>
<a>
<h1>
<img>TITLE
</h1>
</a>
</li>
<li>
<a>PAGE</a>
</li>
<li>
<a>PAGE</a>
<ul class="submenu">
<li><a>PAGE</a></li>
<li><a>PAGE</a></li>
<li><a>PAGE</a></li>
</ul>
</li>
<li>
<a>PAGE</a>
</li>
</ul>
</nav>
</header>
&#13;
现在,为了使定位做一些事情,我必须选择要进行定位的元素。但是,如果我使用list元素,子菜单将会太长,因为它位于list元素下,并且标题有一些填充。
#header li {
position: relative; /* Positioning will be relative to the ANCESTOR LIST ITEM */
}
#header{
padding: 0.125em;
background: #eee; /* Styling for clarity */
}
nav{
display: inline; /* Makes nav inline */
}
h1{
display: inline; /* Makes the main title inline */
}
#header ul{
padding:0; /* Clears the space around the list */
display: inline; /* Makes lists inline */
}
#header li{
display: inline; /* Makes list items inline */
list-style-type: none; /* Removes bullets */
position: relative; /* Positioning will be relative to the ANCESTOR LIST ITEM */
}
#header ul>li>.submenu>li{
display: block; /* Makes submenu list items behave normally */
}
#header ul>li>.submenu{
display: none; /* Hides the submenu */
position: absolute; /* Enables positioning */
top: 100%; /* Position directly under - SHOULD BE UNDER HEADER */
left: 0; /* Align left edge - SHOULD BE ALIGNED WITH ANCESTOR LIST ITEM */
background: #ccc; /* Styling for clarity */
}
#header ul>li:hover>.submenu{
display: block; /* Shows the submenu */
}
&#13;
<header id="header">
<nav>
<ul>
<li>
<a>
<h1>
<img>TITLE
</h1>
</a>
</li>
<li>
<a>PAGE</a>
</li>
<li>
<a>PAGE</a>
<ul class="submenu">
<li><a>PAGE</a></li>
<li><a>PAGE</a></li>
<li><a>PAGE</a></li>
</ul>
</li>
<li>
<a>PAGE</a>
</li>
</ul>
</nav>
</header>
&#13;
结果是:与列表元素对齐
如果我用标题做,那么子菜单将与整个标题的左边对齐,这不是我想要的。
#header {
position: relative; /* Positioning will be relative to the HEADER */
}
#header{
padding: 0.125em;
background: #eee; /* Styling for clarity */
position: relative; /* Positioning will be relative to the HEADER */
}
nav{
display: inline; /* Makes nav inline */
}
h1{
display: inline; /* Makes the main title inline */
}
#header ul{
padding:0; /* Clears the space around the list */
display: inline; /* Makes lists inline */
}
#header li{
display: inline; /* Makes list items inline */
list-style-type: none; /* Removes bullets */
}
#header ul>li>.submenu>li{
display: block; /* Makes submenu list items behave normally */
}
#header ul>li>.submenu{
display: none; /* Hides the submenu */
position: absolute; /* Enables positioning */
top: 100%; /* Position directly under - SHOULD BE UNDER HEADER */
left: 0; /* Align left edge - SHOULD BE ALIGNED WITH ANCESTOR LIST ITEM */
background: #ccc; /* Styling for clarity */
}
#header ul>li:hover>.submenu{
display: block; /* Shows the submenu */
}
&#13;
<header id="header">
<nav>
<ul>
<li>
<a>
<h1>
<img>TITLE
</h1>
</a>
</li>
<li>
<a>PAGE</a>
</li>
<li>
<a>PAGE</a>
<ul class="submenu">
<li><a>PAGE</a></li>
<li><a>PAGE</a></li>
<li><a>PAGE</a></li>
</ul>
</li>
<li>
<a>PAGE</a>
</li>
</ul>
</nav>
</header>
&#13;
这就是它的样子:在标题下
所以,我想要的是&#34; top:100%;&#34;与整个标题相关,&#34;左:0;&#34;与子菜单为子项的列表元素相关。
我希望我的问题很明确。我以前找不到任何提出这个问题的人。对不起,我无法在问题中放置图片或更多链接,因为这是我的第一个问题,所以我没有足够的声誉。
感谢您阅读我的问题,希望能尽快得到解答!
答案 0 :(得分:1)
这是小提琴:http://jsfiddle.net/td6Las4x/
只为“#header”添加“position:relative”,为“#header ul&gt; li&gt; .submenu”和“display:inline-block;”删除“left:0”为“#header li”
#header li {
display: inline-block;
}
答案 1 :(得分:0)
您可以将.submenu
相对于标题定位,然后利用left: auto
的行为。
然后,.submenu
将是一个绝对定位的元素,其left
,width
和right
属性都是auto
。
因此,根据§10.3.7,
如果全部三个&#39; left&#39;,&#39; width&#39;和&#39; right&#39;是&#39; auto&#39;:首先设置任何 &#39;自动&#39; &#39; margin-left&#39;的值和&#39; margin-right&#39;到0.然后,如果 &#39;方向&#39;建立static-position的元素的属性 包含块是&#39; ltr&#39;设置&#39;离开&#39;到static position并申请 第三条规则
该静态位置定义为
左边的静态位置&#39;是距离左边缘的距离 包含块到假设框的左边缘 如果它的位置是第一个元素,那将是第一个元素。 财产一直是静态的&#39;并且&#39;漂浮&#39;曾经没有了#39;价值是 如果假设框位于包含的左侧,则为负数 块。
因此,请删除position: absolute
并查看:
#header{
padding: 0.125em;
background: #eee; /* Styling for clarity */
position: relative; /* Positioning will be relative to the HEADER */
}
nav{
display: inline; /* Makes nav inline */
}
h1{
display: inline; /* Makes the main title inline */
}
#header ul{
padding:0; /* Clears the space around the list */
display: inline; /* Makes lists inline */
}
#header li{
display: inline; /* Makes list items inline */
list-style-type: none; /* Removes bullets */
}
#header ul>li>.submenu>li{
display: block; /* Makes submenu list items behave normally */
}
#header ul>li>.submenu{
display: none; /* Hides the submenu */
position: static;
top: 100%; /* Position directly under - SHOULD BE UNDER HEADER */
background: #ccc; /* Styling for clarity */
}
#header ul>li>.submenu{
display: block; /* Shows the submenu */
}
&#13;
<header id="header">
<nav>
<ul>
<li>
<a>
<h1>
<img>TITLE
</h1>
</a>
</li>
<li>
<a>PAGE</a>
</li>
<li>
<a>PAGE</a>
<ul class="submenu">
<li><a>PAGE</a></li>
<li><a>PAGE</a></li>
<li><a>PAGE</a></li>
</ul>
</li>
<li>
<a>PAGE</a>
</li>
</ul>
</nav>
</header>
&#13;
实际上,由于.submenu
是一个块且其父级是内联的,submenu
将出现在下一行的开头。
为了防止这种情况,.submenu
必须生成一个块容器。可以使用display: inline-block
生成内联级块容器。
#header{
padding: 0.125em;
background: #eee; /* Styling for clarity */
position: relative; /* Positioning will be relative to the HEADER */
}
nav{
display: inline; /* Makes nav inline */
}
h1{
display: inline; /* Makes the main title inline */
}
#header ul{
padding:0; /* Clears the space around the list */
display: inline; /* Makes lists inline */
}
#header li{
display: inline-block; /* Makes list items inline-block */
list-style-type: none; /* Removes bullets */
}
#header ul>li>.submenu>li{
display: block; /* Makes submenu list items behave normally */
}
#header ul>li>.submenu{
display: none; /* Hides the submenu */
position: static;
top: 100%; /* Position directly under - SHOULD BE UNDER HEADER */
background: #ccc; /* Styling for clarity */
}
#header ul>li>.submenu{
display: block; /* Shows the submenu */
}
&#13;
<header id="header">
<nav>
<ul>
<li>
<a>
<h1>
<img>TITLE
</h1>
</a>
</li>
<li>
<a>PAGE</a>
</li>
<li>
<a>PAGE</a>
<ul class="submenu">
<li><a>PAGE</a></li>
<li><a>PAGE</a></li>
<li><a>PAGE</a></li>
</ul>
</li>
<li>
<a>PAGE</a>
</li>
</ul>
</nav>
</header>
&#13;
现在.submenu
具有左侧所需的静态位置。
因此,如果再次添加position: absolute
,它会按预期运行:
#header{
padding: 0.125em;
background: #eee; /* Styling for clarity */
position: relative; /* Positioning will be relative to the HEADER */
}
nav{
display: inline; /* Makes nav inline */
}
h1{
display: inline; /* Makes the main title inline */
}
#header ul{
padding:0; /* Clears the space around the list */
display: inline; /* Makes lists inline */
}
#header li{
display: inline-block; /* Makes list items inline-block */
list-style-type: none; /* Removes bullets */
}
#header ul>li>.submenu>li{
display: block; /* Makes submenu list items behave normally */
}
#header ul>li>.submenu{
display: none; /* Hides the submenu */
position: absolute;
top: 100%; /* Position directly under - SHOULD BE UNDER HEADER */
background: #ccc; /* Styling for clarity */
}
#header ul>li>.submenu{
display: block; /* Shows the submenu */
}
&#13;
<header id="header">
<nav>
<ul>
<li>
<a>
<h1>
<img>TITLE
</h1>
</a>
</li>
<li>
<a>PAGE</a>
</li>
<li>
<a>PAGE</a>
<ul class="submenu">
<li><a>PAGE</a></li>
<li><a>PAGE</a></li>
<li><a>PAGE</a></li>
</ul>
</li>
<li>
<a>PAGE</a>
</li>
</ul>
</nav>
</header>
&#13;
总结一下,修复是
#header li {
display: inline-block;
}
#header ul > li > .submenu {
left: auto; /* Initial value */
}