0

Sir I have these codes

<!DOCTYPE HTML>
<html>
   <head>
      <title>Untitled 1</title>
      <style type="text/css">
         #box1 {
         width:400px;
         height:60px;
         padding:5px;
         border:1px solid blue;
         margin:50px auto;
         overflow:auto;
         }
         #menu ul li {
         display:inline;
         margin:2px;
         background:khaki;
         width:150px;
         height:50px;
         color:blue;
         font-size:14px;
         font-weight: bold;
         padding: 10px;
         border-radius: 10px 10px 0 0;
         }
         #menu ul li a:hover {
         text-decoration:underline;background-color:red;color:white;
         }
      </style>
   </head>
   <body>
      <div id="box1">
         <div id="menu">
            <ul>
               <li><a href="">Contact Us</a></li>
               <li>Products</li>
               <li>Gallery</li>
               <li>About Us</li>
            </ul>
         </div>
      </div>
   </body>
</html>

The problem is I want to increase the width of <li> from this part

 #menu ul li {

the current value is width:150px;
but when I Change it as width:200px;

it does not take effect.

What I am doing wrong?

Attachments m.png 3.41 KB
2
Contributors
1
Reply
8
Views
2 Years
Discussion Span
Last Post by JorgeM
1

Instead of using display:inline you can use float:leftso you are able to adjust the size of the width. by using display:inline, you are essentially telling the browser not to treat the element as a block element. inline elements do not have a width. So, try a variation such as this...

#box1 {
   width:400px;
   height:100px;
   padding:5px;
   border:1px solid blue;
   margin:50px auto;
}

#menu ul li {
   list-style:none;
   float:left;
   margin:2px;
   background:khaki;
   width:60px;
   height:50px;
   color:blue;
   font-size:14px;
   font-weight: bold;
   padding: 10px;
   border-radius: 10px 10px 0 0;
}

#menu ul li a:hover {
   text-decoration:underline;
   background-color:red;
   color:white;
}

Edited by JorgeM

This question has already been answered. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.