SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Enthusiast
    Join Date
    Dec 2009
    Posts
    67
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Clickable li's with different number of text lines inside

    Hi,

    I'm trying to render clickable li's but independent from the content that there is inside of the li. For example the code below has one button with just one line and another one with four lines:

    Code:
    <ul>
      <li><a href="#">jkfasdf</a></li>
      <li><a href="#">jkffasdf fjaskdfasfs jajklfd fjklasdfas</a></li>
    </ul>
    
    ul{
      background: red;
      border-top-left-radius: 5px;
      border-bottom-left-radius: 5px;
      border-top-right-radius: 5px;
      border-bottom-right-radius: 5px;
      float: left; 
    }
    
    li {
      padding: 10px; display: inline-block;
      border-left: 1px solid white;
      width: 100px;
      text-align: center;
      vertical-align: middle;
    }
    li:first-child {border-left: none;}
    
    a {
    
    }
    Here is the jsfiddle.

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,165
    Mentioned
    453 Post(s)
    Tagged
    8 Thread(s)
    It isn't really clear why you'd want the LI "clickable" independently of the A. Do you mean you just want a visual change on hover? Something like this?

    Code:
    ul{
      background: red;
      border-top-left-radius: 5px;
      border-bottom-left-radius: 5px;
      border-top-right-radius: 5px;
      border-bottom-right-radius: 5px;
      display: table;
    }
    
    li {
      padding: 10px; 
      border-left: 1px solid white;
      width: 100px;
      text-align: center;
      vertical-align: middle;
      display: table-cell;
    }
    li:first-child {border-left: none;}
    li:hover {background: blue;}
    
    li:hover a {color: white;}


Bookmarks

Posting Permissions

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