Question

我正在使用float右键在每个列表项的右侧显示两个链接。但是它们并没有坚持所有列表项的右侧，导致它看起来像一个步骤。我已经尝试了很多关于SO的各种答案的组合大约4天。似乎没什么用。

两天前我在SO上问过question，并没有得到任何回复，可能是因为它有JSF代码。所以我已经将生成的html删除到复制此问题的最小代码。

.labelTitleBox {
  overflow: hidden;
  width: 100%;
  display: inline;
}

.layerPanelButton {
  font-size: 18pt !important;
  text-decoration: none;
  color: #0092cf !important;
}

.layerPanelButtonWrap {
  width: auto;
  float: right;
  padding-left: 4px;
  padding-right: 4px;
  color: #0092cf !important;
}

.label {
  width: auto;
  display: inline;
  white-space: normal;
}

<div id="form:layerTree" class="ui-widget-content">
  <ul>
    <li id="form:layerTree:0">
      <span class="label">
				<span class="layerPanelButtonWrap"><a href="#" class="layerPanelButton" title="Show Tools">%</a></span>
        <div class="labelTitleBox">Node 0</div>
      </span>
      <ul class="">
        <li id="form:layerTree:0_0">
          <span class="label">
					 <span class="layerPanelButtonWrap"><a href="#" class="layerPanelButton" title="Show Tools">=</a></span>
           <span class="layerPanelButtonWrap"><a href="#" class="layerPanelButton" title="Show Tools">%</a></span>
           <div class="labelTitleBox">Node 0.0</div>
          </span>
        </li>
        <li id="form:layerTree:0_1">
          <span class="label">
					 <span class="layerPanelButtonWrap"><a href="#" class="layerPanelButton" title="Show Tools">=</a></span>
           <span class="layerPanelButtonWrap"><a href="#" class="layerPanelButton" title="Show Tools">%</a></span>
           <div class="labelTitleBox">Node 0.1</div>
          </span>
        </li>
        <li id="form:layerTree:0_2">
          <span class="label">
					 <span class="layerPanelButtonWrap"><a href="#" class="layerPanelButton" title="Show Tools">=</a></span>
           <span class="layerPanelButtonWrap"><a href="#" class="layerPanelButton" title="Show Tools">%</a></span>
           <div class="labelTitleBox">Node 0.2</div>
          </span>
        </li>
      </ul>
    </li>
  </ul>
</div>

Answer 1

您需要清除浮动因为浮动项的字体大小大于li的行高，因此它们相互堆叠

ul ul {clear:right;}
li:after {display:block; clear:right; content:'';}

Updated fiddle

此外，与您的问题无关，但您的答案中包含无效的html - div不允许是span

的子元素

Answer 2

包裹元素的高度会导致浮动元素的缩进。

如果添加高度，跨度将按预期向右浮动。

li {
    height:50pt;
}

这不会完全修复您的列表，但它可以指向正确的方向。

https://jsfiddle.net/9g5h6687/13/

浮动右侧看起来像一个内部列表

2 个答案: