CODEWITHSUNDEEP
htmlcss
saimadan
saimadan

Reputation: 183

alignment of list items in on a straight line

i am trying to create a menu bar with list items.i applied css for the list items.i want all of them to lie on a single line i mean when zoom in to 500% and zoom out to 25% all the list items should be in same line.but in my implementation they are going out of the line.i'm a beginner please help me

css:

     .menu
     {
       margin-top:5px;
       margin-bottom:5px;
       background-color:#4c4c4c;
       color:white;
       position:relative;
       display:inline-block;
       text-align:center;
       padding:0px 85px 0px 85px;
       border:2px solid #4c4c4c;
      }
      #menuitem1
      {
   border-top-left-radius:5px;
   border-bottom-left-radius:5px; 
   text-align:center;
   margin:auto;
      }
      #menuitem4
      {
   border-top-right-radius:5px;
   border-bottom-right-radius:5px;  
      }

<html>
<body >
 <div id="page">
   <div id="bar">
    <ul>
      <li class="menu" id="menuitem1" >Home</li>
      <li class="menu">contact us</li>
      <li class="menu">pay</li>
      <li class="menu" id="menuitem4" >plans</li>
     </ul>
   </div>
 </div> 
</body>
</html>

jsfiddle

Upvotes: 0

Views: 4221

Answers (3)

S&#252;ha Boncuk&#231;u
S&#252;ha Boncuk&#231;u

Reputation: 983

You can try using percentage width values for width of your li elements. 

.some-class {
    width: 25%
}

I've made some changes on jsfiddle just to show it is possible with this kind of implementation.

If you are concerned about mobile devices. Take a look at meta tags with device-width.

Upvotes: 1

Damian Krawczyk
Damian Krawczyk

Reputation: 2241

You can add:

ul {
    white-space: nowrap;
}

to prevent wrapping -> jsfiddle

Upvotes: 1

Prem Anand
Prem Anand

Reputation: 1496

Set the width of the .menu in percentage so the li's are responsive.

JSFIddle

HTML

<body >
    <div id="page">
            <div id="bar">
            <ul>
                <li class="menu" id="menuitem1" >
                    Home
                </li>
                <li class="menu">
                    contact us
                </li>
                <li class="menu">
                    pay
                </li>
                <li class="menu" id="menuitem4" >
                    plans
                </li>
            </ul>
        </div>

    </div>



</body>

CSS

.menu
{
 margin-top:5px;
 margin-bottom:5px;
 background-color:#4c4c4c;
 color:white;
 position:relative;
 display:inline-block;
 text-align:center;
 padding:0px 0px 0px 0px;
 border:2px solid #4c4c4c;
    width:20%;
}
#menuitem1
{
    border-top-left-radius:5px;
    border-bottom-left-radius:5px; 
    text-align:center;
    margin:auto;
}
#menuitem4
{
    border-top-right-radius:5px;
    border-bottom-right-radius:5px; 

}

Upvotes: 3

Related Questions