CODEWITHSUNDEEP
htmlcss
Ashish Mathew
Ashish Mathew

Reputation: 823

Float right appears like a step inside list

I am using float right to make two links appear on the right of every list item. But they do not stick to the right side for all the list items, causing it to appear like a step. I have tried a lot of combinations from various answers on SO for about 4 days. Nothing seemed to work.

I asked this question, two days ago on SO, and did not get any response, probably because it had JSF code. So I have stripped down the html generated to the minimal code that replicates this issue.

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

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

Upvotes: 0

Views: 83

Answers (2)

Pete
Pete

Reputation: 58462

You need to clear the floats because the font size of the floated items are larger than the line-height of li so they stack on each other

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

Updated fiddle

Also, nothing to do with the problem but you have invalid html in your answer - div is not allowed to be a child element of a span

Upvotes: 1

Brainfeeder
Brainfeeder

Reputation: 2632

It is the wrapping element's height that causes the indent of the floating elements.

If you add a height the spans will float right as expected.

li {
    height:50pt;
}

This will not fix your list completly, but it could point you in the right direction.

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

Upvotes: 0

Related Questions