Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    Regular Coder
    Join Date
    Sep 2012
    Posts
    103
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Bullets and ordered list

    I'm trying to make my list even. But for some reason. Some of my bullets are taking up two lines. I tryed to fix it with the padding. Whats wrong here?


    Code:
    <ul style="width:100px; border:0px solid gray; padding:10px 70px 50px 70px; float:left;">
     <li><a href="#">Afghanistan</li>
    <li><a href="#">Albania</li>
    <li><a href="#">Algeria</li>
    <li><a href="#">Andorra</li>
    <li><a href="#">Angola</li>
    <li><a href="#">Antigua and Barbuda</li>
    <li><a href="#">Argentina</li>
    <li><a href="#">Armenia</li>
    <li><a href="#">Australia</li>
    <li><a href="#">Austria</li>
    <li><a href="#">Azerbaijan</li>
    <li><a href="#">The Bahamas</li>
    <li><a href="#">Bahrain</li>
    <li><a href="#">Bangladesh</li>
    <li><a href="#">Barbados</li>
    <li><a href="#">Belarus</li>
    <li><a href="#">Belgium</li>
    <li><a href="#">Belize</li>
    <li><a href="#">Benin</li>
    <li><a href="#">Bhutan</li>
    <li><a href="#">Bolivia</li>
    <li><a href="#">Bosnia-Herzegovina</li>
    <li><a href="#">Botswana</li>
    <li><a href="#">Brazil</li>
    <li><a href="#">Burkina Faso</li>
    <li><a href="#">Burundi</li>
    <li><a href="#">Cambodia</li>
    <li><a href="#">Cameroon</li>
    <li><a href="#">Canada</li>
    <li><a href="#">Cape Verde</li>
    <li><a href="#">Central African Republic</li>
    <li><a href="#">Chad</li>
    <li><a href="#">Chile</li>
    <li><a href="#">China</li>
    <li><a href="#">Colombia</li>
    <li><a href="#">Congo</li>
    <li><a href="#">Democratic Republic of the Congo</li>
    <li><a href="#">Costa Rica</li>
    <li><a href="#">Côte D'Ivoire (Ivory Coast) </li>
    <li><a href="#">Croatia</li>
    <li><a href="#">Cuba</li>
    <li><a href="#">Cyprus</li>
    <li><a href="#">Czech Republic (Czechoslovakia) </li>
    <li><a href="#">Denmark</li>
    <li><a href="#">Djibouti</li>
    <li><a href="#">Dominica</li>
    <li><a href="#">Dominican Republic</li>
    <li><a href="#">East Timor</li>
    <li><a href="#">Ecuador</li>
    <li><a href="#">Egypt</li>
    <li><a href="#">El Salvador</li>
    <li><a href="#">Equatorial Guinea</li>
    <li><a href="#">Eritrea</li>
    <li><a href="#">Estonia</li>
    <li><a href="#">Ethiopia</li>
    
    
     </ul>
    
     <ul style="width:100px; border:0px solid gray; padding:10px 70px 50px 70px; float:left;">
     <li><a href="#">Fiji</li>
    <li><a href="#">Finland</li>
    <li><a href="#">France</li>
    <li><a href="#">Gabon</li>
    <li><a href="#">The Gambia</li>
    <li><a href="#">Georgia</li>
    <li><a href="#">Germany</li>
    <li><a href="#">Ghana</li>
    <li><a href="#">Greece</li>
    <li><a href="#">Grenada</li>
    <li><a href="#">Guatemala</li>
    <li><a href="#">Guinea</li>
    <li><a href="#">Guinea-Bissau</li>
    <li><a href="#">Guyana</li>
    <li><a href="#">Honduras</li>
    <li><a href="#">Hungary</li>
    <li><a href="#">India</li>
    <li><a href="#">Indonesia</li>
    <li><a href="#">Iran</li>
    <li><a href="#">Iraq</li>
    <li><a href="#">Israel</li>
    <li><a href="#">Italy</li>
    <li><a href="#">Jamaica</li>
    <li><a href="#">Japan</li>
    <li><a href="#">Jordan</li>
    <li><a href="#">Kazakhstan</li>
    <li><a href="#">Kenya</li>
    <li><a href="#">Kiribati</li>
    <li><a href="#">Kosovo</li>
    <li><a href="#">Kuwait</li>
    <li><a href="#">Kyrgyzstan</li>
    <li><a href="#">Laos</li>
    <li><a href="#">Latvia</li>
    <li><a href="#">Lebanon</li>
    <li><a href="#">Lesotho</li>
    <li><a href="#">Liberia</li>
    <li><a href="#">Libya</li>
    <li><a href="#">Liechtenstein</li>
    <li><a href="#">Lithuania</li>
    <li><a href="#">Luxembourg</li>
    <li><a href="#">Macedonia </li>
    <li><a href="#">Madagascar</li>
    <li><a href="#">Malawi </li>
    <li><a href="#">Malaysia</li>
    <li><a href="#">Maldives</li>
    <li><a href="#">Mali</li>
    <li><a href="#">Malta</li>
    <li><a href="#">Marshall Islands</li>
    <li><a href="#">Mauritania</li>
    <li><a href="#">Mauritius</li>
    <li><a href="#">Mexico</li>
    <li><a href="#">Federated States of Micronesia</li>
    <li><a href="#">Moldova</li>
    <li><a href="#">Monaco</li>
    <li><a href="#">Mongolia</li>
    
    
     </ul>
    
     <ul style="width:100px; border:0px solid gray; padding:10px 70px 50px 70px; float:left;">
     <li><a href="#">Montenegro</li>
    <li><a href="#">Morocco</li>
    <li><a href="#">Mozambique</li>
    <li><a href="#">Myanmar (Burma) </li>
    <li><a href="#">Namibia</li>
    <li><a href="#">Nauru</li>
    <li><a href="#">Nepal</li>
    <li><a href="#">The Netherlands</li>
    <li><a href="#">New Zealand</li>
    <li><a href="#">Nicaragua</li>
    <li><a href="#">Niger</li>
    <li><a href="#">Nigeria</li>
    <li><a href="#">North Korea</li>
    <li><a href="#">Norway</li>
    <li><a href="#">Oman</li>
    <li><a href="#">Pakistan</li>
    <li><a href="#">Palau</li>
    <li><a href="#">Panama</li>
    <li><a href="#">Papua New Guinea</li>
    <li><a href="#">Paraguay</li>
    <li><a href="#">Peru</li>
    <li><a href="#">The Philippines</li>
    <li><a href="#">Poland</li>
    <li><a href="#">Portugal</li>
    <li><a href="#">Qatar</li>
    <li><a href="#">Romania</li>
    <li><a href="#">Russia</li>
    <li><a href="#">Rwanda</li>
    <li><a href="#">St. Kitts and Nevis</li>
    <li><a href="#">St. Lucia</li>
    <li><a href="#">St. Vincent and the Grenadines</li>
    <li><a href="#">Samoa</li>
    <li><a href="#">San Marino</li>
    <li><a href="#">São Tomé and Príncipe</li>
    <li><a href="#">Saudi Arabia</li>
    <li><a href="#">Senegal</li>
    <li><a href="#">Serbia</li>
    <li><a href="#">Seychelles</li>
    <li><a href="#">Sierra Leone</li>
    <li><a href="#">Singapore</li>
    <li><a href="#">Slovakia</li>
    <li><a href="#">Slovenia</li>
    <li><a href="#">Solomon Islands</li>
    <li><a href="#">Somalia</li>
    <li><a href="#">Republic of South Africa</li>
    <li><a href="#">South Korea</li>
    <li><a href="#">South Sudan</li>
    <li><a href="#">Spain</li>
    <li><a href="#">Sri Lanka</li>
    <li><a href="#">Sudan</li>
    <li><a href="#">Suriname</li>
    <li><a href="#">Swaziland</li>
    <li><a href="#">Sweden</li>
    
    
     </ul>

  • #2
    Master Coder felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    6,471
    Thanks
    0
    Thanked 634 Times in 624 Posts
    Some of the entries are too wide to fit on a single line within the width you specified -(and if someone makes the text bigger then even fewer will fit).

    You could use white-space:nowrap to prevent the text wrapping. You'd then need to set overflow in order to determine what happens when the lines don't fit.
    Stephen
    Learn Modern JavaScript - http://javascriptexample.net/
    Helping others to solve their computer problem at http://www.felgall.com/

    Don't forget to start your JavaScript code with "use strict"; which makes it easier to find errors in your code.

  • #3
    Regular Coder
    Join Date
    Sep 2012
    Posts
    103
    Thanks
    0
    Thanked 0 Times in 0 Posts
    How do I do that?


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •