list alignment issue html

Question

I have a list defined as

<ul id="one">
  <li>Long sentence of text</li>
  <li></li>
</ul>

The long sentence of text in the list messes the left alignment.

i tried

#one li{
   display: inline;
   overflow: hidden;
}

But this removes the bullet points. How can I maintain the left alignment as well as retain the bullet points?

Answer 1

The default style of bullet points in all browsers is already what you require. Therefore you must have something that changes this. Are you using any libraries or reset.css files? Just inspect the element (e.g. in Firebug) and look at what styles have been applied.

Answer 2

The bullet is outside of the the list item, so when u do display: inline; it is getting cut off Doing the following should fix this.

ul {
  list-style-position: inside;
}

Answer 3

Did u check it in browser.When i run your code w/o css i get the following result.