• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 333
  • Last Modified:

unable to increase size of horizontal list item using css

I'm trying to make these hover buttons side by side like in a horizontal menu but the buttons won't seem to get bigger even if I fix their height and width
.button li{
display: inline;
background-repeat: no-repeat;
}
 
.button li a{
background-color: #CCCCCC;
/*background-image: url(normal image path);*/
background-repeat: no-repeat;
width: 100px;
height: 50px;
}
 
.button li a:hover{
background: none;
}
 
 
 
 
<div align="center">
<ul class="button">
<li><a href="#test">My link</a></li>
<li><a href="#test">My link</a></li>
</ul>
</div>

Open in new window

0
MeridianManagement
Asked:
MeridianManagement
1 Solution
 
jericotolentinoCommented:
I'm not really sure what you're trying to do, but you can try:

padding: 10px;

if it works for you.
0
 
MeridianManagementAuthor Commented:
I want to make horizontal hover buttons. Padding 10 doesn't work because it makes the LI bigger but the gray part where the links are still looks small.
0
 
santoshrajanCommented:
Set the width and height for 'li' css and remove it fro where it is now.
.button li{
display: inline;
background-repeat: no-repeat;
width: 100px;
height: 50px;
}
 

Open in new window

0

Featured Post

Never miss a deadline with monday.com

The revolutionary project management tool is here!   Plan visually with a single glance and make sure your projects get done.

Tackle projects and never again get stuck behind a technical roadblock.
Join Now