html - List Item, Two Hyperlinks CSS Design -


Write me a single & lt; Li & gt; element is required, with two buttons inside it as follows:

  & lt; Li & gt; & Lt; A href = "#" class = "left" & gt; Title & lt; / A & gt; & Lt; A href = "#" square = "true"> & Lt; / A & gt; & Lt; / Li & gt;  

With a layout of buttons similar to the following:

  ____________ | _________ | __ |  

The entire button will expand in the background, on the left & lt; A & gt; The tag will be filled with text, with the alpha transparent on the right & lt; Li & gt; Button to overlay the background of the element This is the CSS I got.

  # left ul #main-menu li.li- a {display: block; Padding: 4px 6px 6px 6px; Text-decoration: none; Color: #fff; Font-size: 12px; Margin: 0; } # Left ul #main-menu li.li- add {height: 25px; Margin: 0; Padding: 0; Background: URL ('button_back.gif') no-repeat; } # Left ul # main menu li.li- add a.left {width: 106px; Swim left; Padding: 5px 6px 6px 6px; } # Left ul # main menu li.li- add a.left: hover {background: url ('button_back_hover.gif') no-repeat; } # Left ul # main menu li.li- add a.right {float: left; Text-align: center; Font-size: 16px; Padding: 4px 0 0; Margin: 0; Height: 21px; Width: 27px; font-weight: bold; } # Left ul # Main-menu li.li- Add a.right: hover {background: url ('button_back_hover.gif') No-double center right; }  

I am doing the same with all other list items, except that they do not have the "add" button on the right side. The problem I am facing is that a second pixel difference is found in other and lt; Li & gt; Elements are being pushed down I'm not sure what I'm doing wrong actually I can do margin-down: -2px but whatever it does 2 A field of pixels is created which is not clickable in the element below.

edit

this was actually float

  # left ul # main menu li.li- add a. Right {float: left; Text-align: center; Font-size: 16px; Padding: 4px 0 0; Margin: 0; Height: 21px; Width: 27px; font-weight: bold; }  

float: left should not contain it, due to some reason the additional difference can be made shrug .

I think your problem is a red herring, I can add good list Was:

  height: 14px; / * Add # left ul # to the main-menu. Li.li- Add a.left '* /  

You did not specify the height for any tag, this auto height was long 25px Code> .right A tag you are setting a height on the li tag, but they are inline elements, do not block the elements as if you create tags only block elements can have specified heights. Hope this will be helpful.

Good luck!


Comments

Popular posts from this blog

c# - ListView onScroll event -

PHP - get image from byte array -

Linux Terminal Problem with Non-Canonical Terminal I/O app -