Question

我列出了如下图所示的列表。我的问题是，整个链接不是可点击的，只有文字。我无法在display: block上设置anchor并为链接指定全宽，因为我已经提供了anchor display: table-cell。

在这里，您可以看到我的问题并试用您的代码： http://jsfiddle.net/kma_999/v0xkk587/

提前致谢！

Image of the list

HTML：

<div class="pane-content">
    <ul>
        <li><a href="#">Kostenkontrolle (Mobile)</a></li>
        <li><a href="#">Sunrise Rechnung</a></li>
        <li><a href="#">Umzug</a></li>
        <li><a href="#">iPhone</a></li>
        <li><a href="#">Telefonieren im Ausland (Roaming)</a></li>
    </ul>
</div>

CSS：

ul {
    border: 1px solid lightgray;
    padding-left: 0px;
}

ul li {
    border-bottom: 1px solid lightgray;
    list-style: none outside none;
    margin-left: 20px;
    margin-right: 20px;
    vertical-align: middle;
}

ul li:last-child{
    border-bottom: 0px solid black; 
}

ul li a {
    display: table-cell;
    height: 75px;
    vertical-align: middle;
    padding-left: 20px;
    color: black;
    width: 100%;
}

ul li a:hover{
    color: black;
    text-decoration: none;
}

ul li a:after {
    content: "\25b6";
    font-size: 10px;
    position: absolute;
    right: 33px;
}

Answer 1

ul {
  display: table;
  border: 1px solid lightgray;
  padding-left: 0px;
  width: 100%;
}

ul li {
  display: table-row;
  list-style: none outside none;
  margin-left: 20px;
  margin-right: 20px;
  vertical-align: middle;
}

ul li:last-child a {
  border-bottom-width: 0; 
}

ul li a {
  display: table-cell;
  height: 75px;
  vertical-align: middle;
  padding-left: 20px;
  border-bottom: 1px solid lightgray;
  color: black;
  width: 100%;
}

您可以看到example

Answer 2

试试这个

ul li a {
    display: inline-table;
    height: 75px;
    vertical-align:middle;
    padding-left: 20px;
    color: black;
    width: 100%;
    line-height:75px;
}

Answer 3

您可以尝试以下代码：

ul li a {
  display: block;
  height: 50px;
  padding: 25px 0px 0px 20px;
  color: black;
  width: 100%;
}

Answer 4

试试这个：

ul li a {
    color: black;
    display: inline-block;   // changed
    height: 75px;
    line-height: 75px;     // added
    padding-left: 20px;
    vertical-align: middle;
    width: 100%;
}

Answer 5

试试这个

ul li a {
    display: table-cell;
    height: 75px;
    vertical-align: middle;
    padding-left: 20px;
    color: black;
    width: 500px;
}

我将width标记a的{{1}}替换为父级100%的{{1}}。然后它似乎工作。

Answer 6

你可以试试这个

ul li a {       
    height: 75px;
    line-height: 75px;
    padding-left: 20px;
    color: black;
    width: 100%;
    display:block;
}

相反，将它设置为垂直对齐中间，您也可以使用line-height使其成为中间。

锚链接无法在全宽范围内点击

6 个答案: