Question

我正在开发某种上下文菜单。指示行是否提供子菜单的箭头应始终居中。这适用于单行<li>元素，但不适用于多行。这里包含箭头符号的<span>与文本的最后一行对齐。

如果菜单包含滚动条，则会变得更糟，然后箭头位于该行下方。

我感谢任何帮助，如果需要灵活的话，解决方案可以包含JS / jQuery。

您可以在此处找到我当前的来源：http://jsfiddle.net/ass9sxo6/3/

顺便说一句：如果箭头符号位于<li>的填充区域，那么它会更好，这样它就不会窃取任何可用于文本的空间。

Answer 1

你可以在你的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。

Answer 2

您可以使用带有<span class="indicator"></span>属性的CSS3 <li>选择器在每个:after元素的末尾附加一个箭头，而不是将content添加到每个<li>元素的末尾。 {1}}元素。

然后在每个position:relative元素上设置CSS属性<li>，以便它的子元素继承其位置。在每个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;
}

P.S。你应该尝试尽可能使用Ascii符号而不是base64图像来保持文件大小小，代码易于理解。

Answer 3

您可以使用absolute：

li {
    position: relative;
}

.indicator {
    position: absolute;
    top: 50%;
    right: 0;
    margin-top: -8px;
}

JSFiddle Demo

Answer 4

将.indicator元素设置为position: absolute;（并给出其父<li>非静态定位）。给它自定义右偏移（例如：right: 5px;），将.top和.bottom设置为0，并将.line-height设置为父<li> s＆＃39;高度。它将指示符自动居中显示为<li> s＆＃39;身高变化。这样的事应该可以正常工作：

.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代码段来轻松调整菜单属性。调整文件头中的变量，将其导出为css，运行：lessc --clean-css ul-stacked.less > ul-stacked.min.css，然后将ul-stacked类打到具有以下结构的任何<ul>：FIDDLE
< p>

<ul class="ul-stacked">
  <li><span>ipsum</span></li>
  <li class="parent"> <span> nulla <span class="indicator">&gt;</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

Answer 5

只需删除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>

垂直对齐<li>中未知高度的<span> </li> </span>

5 个答案: