Question

I’ve following DOM structure

<div>
    <span>/* comment action */</span>       //float:left
    <span>/* like action */</span>          //float:left
    <span>/* other actions                  //float:right; position:relative;
        <ul>                //position:absolute;
            <li>Set due date</li>
            <li>Delete</li>
        </ul>
    </span>
</div>

The problem is, the width of list item is set to width of longest word. I want each list item to appear in one line (like block) and maximum width should as of longest list item, and show them one below other.

Here are some screen shots that will give much better idea.

https://i.stack.imgur.com/ooEVd.jpg (max width of word “Options”)

https://i.stack.imgur.com/7kqAY.jpg (max width of word “time”)

https://i.stack.imgur.com/ScxFh.jpg (max width of word “Setduetime” when removed spaces)

How can I fix this? (I don’t want to specify specific width to ul)

Answer 1

@Bongs; write like this:

ul{white-space:nowrap}