我正在开发某种上下文菜单。指示行是否将提供子菜单的箭头应始终居中。这适用于单行 <li> 元素，但不适用于多行。这里包含箭头符号的<span> 与文本的最后一行对齐。
如果菜单包含滚动条，则更糟糕的是，箭头位于该行下方。
感谢您的帮助，如果需要灵活，该解决方案可以包含 JS/jQuery。
你可以在这里找到我当前的来源：http://jsfiddle.net/ass9sxo6/3/
顺便说一句：如果箭头符号位于 <li> 的填充区域会更好，这样它就不会窃取任何可用于文本的空间。
【问题讨论】：
标签： html css alignment html-lists center
将.indicator 元素设置为position: absolute;（并为其父级<li> 提供非静态定位）。给它自定义右偏移量（例如：right: 5px;），将.top 和.bottom 设置为0，并将.line-height 设置为父<li>s 的高度。当<li>s 的高度发生变化时，它会自动将指示器垂直居中。这样的事情应该可以正常工作：
.indicator {
margin : 0;
padding : 0;
bottom : 0;
display : block;
line-height : 50px; /* same as parents' height, assuming its' 50px... */
position : absolute;
right : 5px;
top : 0;
}
less sn-p 来轻松调整菜单属性。调整文件头中的变量，将其导出为 css，运行：lessc --clean-css ul-stacked.less > ul-stacked.min.css，并将 ul-stacked 类添加到具有以下结构的任何 <ul>：FIDDLE<ul class="ul-stacked">
<li><span>ipsum</span></li>
<li class="parent"> <span> nulla <span class="indicator">></span> </span> </li>
<li><span>lorem</span></li>
<!-- etc. -->
</ul>
// ul-stacked.less
// #vars
@class-name : ul-stacked;
@class-name-feedback : indicator;
@class-name-parent : parent;
@body-bg : #f8f8f8;
@body-frame-bg : #ccc;
@body-frame-width : 2px;
@body-height-base : 50px;
@body-pad-content-base : .2em;
@border-radius-base : 2px;
@feedback-offs-right : 1em;
@spacing-bottom-base : 2px;
@body-bg-hover : lighten(@body-bg, 2%);
@body-height : @body-height-base * 1;
@spacing-bottom : @spacing-bottom-base + @body-frame-width / 2;
// #mixins
.reset-base() {
border : none;
margin : 0;
outline : none;
padding : 0;
}
.wrapper-fluid() {
display : block;
height : auto;
width : 100%;
}
.list-unstyled() {
list-style : none;
list-style-position : outside;
margin : 0;
padding : 0;
}
.borders(@r: @border-radius-base) {
border-radius: @r;
}
ul.@{class-name} {
.list-unstyled;
.reset-base;
.wrapper-fluid;
> li {
.borders;
.reset-base;
background : @body-frame-bg;
display : block;
float : none;
height : @body-height;
position : relative;
width : 100%;
> * {
&:hover {
background : @body-bg-hover;
}
background : @body-bg;
bottom : @body-frame-width;
display : block;
left : @body-frame-width;
padding : @body-pad-content-base;
position : absolute;
right : @body-frame-width;
top : @body-frame-width;
}
}
> li {
margin-bottom: @spacing-bottom;
}
> li:last-child {
margin-bottom: 0;
}
> li.@{class-name-parent} {
> * {
> .@{class-name-feedback} {
.reset-base;
bottom : 0;
display : block;
line-height : @body-height;
position : absolute;
right : @feedback-offs-right;
top : 0;
}
}
}
}
// eof
【讨论】：
您可以使用带有content 属性的CSS3 :after 选择器在每个<li> 元素的末尾附加一个箭头，而不是将<span class="indicator"></span> 添加到每个<li> 元素的末尾。
然后在每个<li> 元素上设置CSS 属性position:relative，这样它的子元素就会继承它的位置。在每个li:after 内容上，您可以设置display:block 和position:absolute 以及top:50% 和margin-top:-0.5em 以获得您想要的垂直对齐方式。
这是对您的 JSFiddle 的修改：http://jsfiddle.net/ass9sxo6/6/
以及我为演示效果添加的CSS属性：
li {position:relative;}
li:after {
content: '›';
font-weight: bold;
position: absolute;
right: 5px;
top: 50%;
margin-top: -0.5em;
}
附：您应该尽可能使用 Ascii 符号而不是 base64 图像，以保持文件较小且代码易于理解。
【讨论】：
你可以使用absolute:
li {
position: relative;
}
.indicator {
position: absolute;
top: 50%;
right: 0;
margin-top: -8px;
}
【讨论】：
只要去掉span标签，把背景图片变成li标签...很简单。
检查这个fiddle demo。
.box li {
background-image: url(https://cdn4.iconfinder.com/data/icons/ionicons/512/icon-arrow-right-b-16.png);
background-position:right center;
background-repeat: no-repeat;
}
<div class="box">
<ul>
<li>
This will be some multiline content
</li>
<li>
and single line
</li>
<li>
This will be some multiline content
</li>
<li>
and single line
</li>
<li>
This will be some multiline content
</li>
<li>
and single line
</li>
</ul>
<div>
【讨论】：
您可以在您的 css 中使用此添加来使您的跨度居中：
.box li {
position: relative;
}
.box ul li span {
position: absolute;
top: 0;
bottom: 0;
right: 0;
margin: auto;
}
小提琴：http://jsfiddle.net/ass9sxo6/4/
定位 span 元素绝对值，顶部/底部/右侧值为 0，并将 margin 设置为 auto。为了工作需要相对于容器元素li的位置。
【讨论】：