css - 双面水平 CSS 菜单

Question

我正在尝试制作一个菜单，左边是定义，右边是链接 - 但我无法让所有框都成为链接。我想我可以用表格解决它，但我希望有一个更顺利的解决方案。

所以我想向左浮动，向右浮动。

这是我的 CSS:

li {
    margin: 0px 10px 0px 100px;  
    padding: 30px 5px 0px 5px;  
    border-bottom: 2px solid black;  
    border-bottom-right-radius: 5px;  
    border-bottom-left-radius: 5px;  
    display: block;  
        -moz-transition: background-color .3s ease-in;  
        -webkit-transition: background-color .3s ease-in;  
        -o-transition: background-color .3s ease-in;  
        transition: background-color .3s ease-in;  
    }  
    li:hover {  
         background-color: #CCC;  
        -moz-transition: background-color 0.01s;  
        -webkit-transition: background-color 0.01s;  
        -o-transition: background-color 0.01s;  
        transition: background-color 0.01s;  
    }  

a {  
    float: right;  
    color: black;  
    text-decoration: none;  
}  

和 HTML:

<ul>  
    <li>Blog<a href="#">#.blogspot.com</a></li>  
    <li>Twitter<a href="https://twitter.com/#">@#</a></li>  
    <li>Google+<a href="https://plus.google.com/u/0/#/posts">Google+</a></li>  
    <li>Contact me<a href="mailto:#@gmail.com">#@gmail.com</a></li>  
</ul>  

或者更好，在这里:http://jsfiddle.net/hJRdN/

Answer 1

这是在 jsfiddle 上完成的

只需替换 js fiddle 中的 html 和 css

<ul>  
    <li><a href="#">Blog<span>#.blogspot.com</span></a></li>  
    <li><a href="https://twitter.com/#"><span>Twitter</span>@#</a></li>  
    <li><a href="https://plus.google.com/u/0/#/posts">Google+<span>Google+</span></a></li>  
    <li><a href="mailto:#@gmail.com">Contact me<span>#@gmail.com</span></a></li>  
</ul>  

CSS

li {
    float:left;
    width:400px;
    margin: 0px 10px 0px 100px;  

    border-bottom: 2px solid black;  
    border-bottom-right-radius: 5px;  
    border-bottom-left-radius: 5px;  
    display: block;  
        -moz-transition: background-color .3s ease-in;  
        -webkit-transition: background-color .3s ease-in;  
        -o-transition: background-color .3s ease-in;  
        transition: background-color .3s ease-in;  
    }  
    li:hover {  
         background-color: #CCC;  
        -moz-transition: background-color 0.01s;  
        -webkit-transition: background-color 0.01s;  
        -o-transition: background-color 0.01s;  
        transition: background-color 0.01s;  
    }  

a {  
    display:block; 
    padding: 30px 5px 0px 5px;  
    color: black;  
    text-decoration: none;  
    width:390px;
} 
a span{ float:right}