如何增加锚标记的宽度内李李宽度

问题描述：

<div class='myClass'> 
    <ul> 
      <li> 
       <a href="myfile.html">My link</a> 
      </li> 
    </ul> 
    </div>

我li有一个固定的。
但是a文本并不总是等于li宽度
因此可点击的区域小于li。
我试图通过增加a的宽度来修复它，但它不起作用。
我该如何实现它。
我使用以下css

.tooltipinner ul { 
    list-style-type: none; 
    margin: 0; 
    overflow-y: auto; 
    padding: 0; 
    width: 305px; 
} 
.tooltipinner ul li { 
    background-color: #BBAEA5; 
    background-image: url("../../Images/UIFiles/Menu/SubmenuBg.jpg"); 
    background-position: left top; 
    background-repeat: repeat-x; 
    border-top: 1px solid #C1BFBD; 
    color: #FFFFFF; 
    cursor: pointer; 
    float: left; 
    font-size: 12px; 
    padding-bottom: 4px; 
    padding-left: 5px; 
    padding-top: 4px; 
    width: 199px; 
} 
.tooltipinner ul li:hover { 
    background-color: #BBAEA5; 
    background-image: url("../../Images/UIFiles/Menu/SubmenuBgHover.jpg"); 
    background-position: left bottom; 
    background-repeat: repeat-x; 
    border-top: 1px solid #C1BFBD; 
    cursor: pointer; 
    float: left; 
    padding-left: 5px; 
} 
.tooltipinner ul li a { 
    color: #000000; 
    font-size: 12px; 
    font-weight: 400; 
    text-decoration: none; 
} 
.tooltipinner ul li a:link { 
    color: #000000; 
    min-width: 200px; 
    text-decoration: none; 
}

我也试图把一个div内a但block元素不能放在里面a。我该如何解决这个问题。

这里是一个小提琴
http://jsfiddle.net/qry45/2/
http://jsfiddle.net/qry45/4/

提供一个演示：http://jsbin.com – 2013-02-21 05:19:34

@Web_Designer我创建了一个小提琴，这是在问题 – 2013-02-21 05:32:28

答

我不确定，但如果你申请width:inherit;于所有内一个，它的工作原理

li { 
    width: 400px; 
    border: 1px solid red; 
} 

li a { 
    position: relative; 
    width: inherit; 
    border: 1px solid green; 
}

我创建了一个小提琴http://jsfiddle.net/qry45/4/ – 2013-02-21 05:35:51

@krshekhar只需添加显示：block; width：inherit; to .tooltipinner ul li a：链接，你完成我已经在萤火虫测试.. – 2013-02-21 05:39:14

@krshekhar和其他原因没有得到整体宽度是你的CSS有填充底部：4px; padding-left：5px; padding-top：4px; .tooltipinner ul li如此锚定的这三条规则将占用整个宽度，但是对于该三条边来说填充。 – 2013-02-21 05:41:36

答

像这样的事情在你的CSS：

.myClass li a { 
    width: 100%; 
}

块元素可以放在内联元素（<a>，<span>等），如果你里面使用HTML5文档类型，并且如果您在<a>元素上设置了display: block;：

.myClass li a { 
    display: block; 
}

无法正常工作我已经做了一个小提琴http://jsfiddle.net/qry45/4/ – 2013-02-21 05:34:54

@Shekhar你想完成的事情可以用很少的CSS来完成。这是一个改进的演示：http://jsfiddle.net/qry45/6/ – 2013-02-22 17:11:46

这确实对我有用。做得好。谢啦。节省了我的时间。 – Niraj 2016-07-22 05:56:01

如何增加锚标记的宽度内李李宽度

相关推荐