How do I make a list keeping each item at a uniform width with a scrollbar

danielsherson suggested the following code for making a list the exact width of its largest item. It works great if the list isn't too long in length. I tried supplying a height and the code doesn't compensate for the width of the scroll bar. Any thoughts on who to accomplish that ?

<style>
  ul, li{float:left;margin;padding:0;display:block;}
  li {clear:left;width:100%;margin:1px 0;background:#03a;}
</style>
<ul>
  <li>Item 1</li>
  <li>Item 2 which is longer</li>
  <li>Item 3</li>
</ul>

Answers


One fix for situations like this is to ensure there is always a scrollbar using this rule:

body {
    overflow-y: scroll;
}

The scrollbar will be grayed out when not needed. This way you are able to design your page with one less variable to consider.


Need Your Help

Only Load Javascript if Supported

javascript

I don't want my users having to load a ton of JS files if their browser doesn't support it. What's the best/easiest/fastest to only load JS scripts if the browser supports Javascript?

How can one detect airplane mode on Android?

java android airplane

I have code in my application that detects if Wi-Fi is actively connected. That code triggers a RuntimeException if airplane mode is enabled. I would like to display a separate error message when i...

About UNIX Resources Network

Original, collect and organize Developers related documents, information and materials, contains jQuery, Html, CSS, MySQL, .NET, ASP.NET, SQL, objective-c, iPhone, Ruby on Rails, C, SQL Server, Ruby, Arrays, Regex, ASP.NET MVC, WPF, XML, Ajax, DataBase, and so on.