Html li items to show on a single row each

Question

I cant see how or where the CSS is making these items show in two columns. i just want them on a single line (full width) each, web tools does not show anything strange with the css, any ideas\quick fix?

 #demoOne li { float:left;display: inline !important;border: #336699 solid 1px;background: lightblue;} <ul id="demoOne"> <li>Item</li> </ul>

enter image description here

I had to add this as well #demoOne input { float: none}

D-W
– D-W

2013-02-16 17:40:48 +00:00
Commented Feb 16, 2013 at 17:40 — D-W
– D-W, Commented Feb 16, 2013 at 17:40

abbood · Accepted Answer · 2013-02-16 17:23:04Z

1

try

display:block

rather than

display:inline

answered Feb 16, 2013 at 17:23

abbood

23.6k20 gold badges145 silver badges261 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

pwolaq · Accepted Answer · 2013-02-16 17:21:46Z

instead of float:left and display:inline use display:block and they won't be displayed in two columns

btw. everything with float:left has display:block so I don't know what you were trying to achieve with that display:inline!important :)

user1328586 · Accepted Answer · 2013-02-16 17:29:39Z

for the single line i recommend using the

display:box

For chrome n safari use display:-webkit-box For opera use display:-o-box For forefox use display:-moz-box For ie use display:-ms-box

Collectives™ on Stack Overflow

Html li items to show on a single row each

3 Answers 3

Comments

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Related