<li> width problem

Question

tqmd1 0 Junior Poster

9 Years Ago

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?

web-design

2 Contributors
1 Reply
193 Views
30 Minutes Discussion Span
Latest Post 9 Years Ago Latest Post by JorgeM

Reply to this topic

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

JorgeM 958 Problem Solver Team Colleague Featured Poster · Answer 1 · 2015-03-31T19:47:54+00:00

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;
}