垂直對齊<span>的</span> <li> <span>身高未知</span>

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和設置余量為自動。 為了工作需要相對於容器元素li 位置 。

Answer 2

無需在每個<li>元素的末尾添加<span class="indicator"></span> ，您可以使用CSS3 :after選擇器和content屬性在每個<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;
}

PS你應該嘗試盡可能使用Ascii符號而不是base64圖像來保持文件大小小，代碼易於理解。

Answer 3

您可以使用absolute ：

li {
    position: relative;
}

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

JSFiddle演示 。

Answer 4

將.indicator元素設置為position: absolute; （並為其父級<li>非靜態定位）。 給它的自定義右偏移（比方說： right: 5px; ），設置.top和.bottom為0，並設置.line-height到父<li> s'的高度。 當<li>的高度變化時，它將自動使指示器垂直居中。 像這樣的東西應該工作正常：

.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> ： 小提琴

 <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標簽......非常簡單。

檢查這個小提琴演示 。

.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>