CODEWITHSUNDEEP
jqueryhtmljquery-ui
sc28
sc28

Reputation: 1213

Forcing jQueryUI sortable 'li' on same line as a 'div'

This should be simple yet I can't figure out how to force a group of li elements onto the same line as a div.

I've considered many answers here that recommend using span, inline-block, a wrapper, avoiding float, etc. but none seem to work.

Here's a fiddle describing the issue: fiddle

And the HTML I've tried:

  <div id="synthesize_div" class="float_center main-div" style="width:1300px; box-sizing:border-box;">
    <span id="decision-text" class="secondary_text">Text</span>
    <p></p>
    <div id="column1" class="" style="color:blue;">hello</div>
    <ul id="columns">
      <li id="compared1" class="secondary_text">+</li>
      <li id="compared2" class="secondary_text">+</li>
      <li id="compared3" class="secondary_text">+</li>
      <li id="compared4" class="secondary_text">+</li>
      <li id="compared5" class="secondary_text">+</li>
    </ul>
  </div>

Is there perhaps some conflict with jQuery-UI or is there a simple solution I'm missing?

Upvotes: 1

Views: 61

Answers (1)

Daniel
Daniel

Reputation: 3370

Your 

<div id="column1" ...

is a block element, because divs are block elements by default. You need to modify that if you want inline elements to be inline with it. A simple 

display: inline-block;

on that div works while maintaining the size and other formatting you already have set up; you could put that in the style tag or in your CSS.

You'll need to set your <ul> to display:inline as well.

Upvotes: 1

Related Questions