Question

I want to make <a> the size of <li>, so a click can be received anywhere inside the li.

span is there to be adjusted to act as a title in the block (but maybe that's another question?)

Here's my CSS

body{
    margin:0px;
    background:#F0F0F0;
}

.header-cont {
    width:100%;
    position:fixed;
    top:0px;
}
.header {
    background-color: #f9c868;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center top;
    height: 400px;
    width: 100%;
    position: relative;
    color: white;
    padding-bottom: 40px;
    padding-top: 40px;
    text-align: center;
}

.footer {
    background-color: #F0F0F0;
    color: black;       
}

.content {
    /*background: #F0F0F0;
    border: 1px solid #CCC;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center top;
    width: 100%;
    position: relative;
    color: black;
    padding-bottom: 40px;
    text-align: center;
    height: 600px;
    text-align: center;*/
    width: 80%;
    margin: 30px auto;
    font-family: sans-serif;
    display: flex;
    flex-wrap: wrap
}

.section {
  display: block;
  margin-bottom: 0px;
  margin-left: 0px;
  margin-right: 0px;
  margin-top: 0px;
}

.content li:nth-of-type(2n) {
  margin-right: 0;
}

.content li {
    display: inline-block;
    margin-bottom: 8px;
    width: calc(50% - 4px);
    margin-right: 8px;
    text-decoration: none;
    color: black;
    text-align: center;
    background-color: white;
}

.content li:nth-of-type(2n) {
  margin-right: 0;
}

li a {

    display: block;
  }

@media screen and (min-width: 50em) {
 .content li {
    width: calc(25% - 6px);
  }

 .content li:nth-of-type(2n) {
    margin-right: 8px;
  }

 .content li:nth-of-type(4n) {
    margin-right: 0;
  }
}

.content li:hover {
  transform: rotate(1deg);
}

And here is my HTML

<template name="home">
    <section class="section">
        <div class="content">

            <li>
                <a href="www.google.com"></a>
                <span>

                </span>
                <p>This is a list 1</p>
            </li>
            <li>
                <a href=""></a>
                <span>

                </span>
                <p>This is a list 2</p>
            </li>
            <li>
                <a href=""></a>
                <span>

                </span>
                <p>This is a list 2</p>
            </li>
            <li>
                <a href=""></a>
                <span>

                </span>
                <p>This is a list 2</p>
            </li>
            <li>
                <a href=""></a>
                <span>

                </span>
                <p>This is a list 2</p>`
            </li>

        </div>
    </section>
</template>

Answer 1

如果li内的所有内容都应该是可点击的，那么请将li中的所有内容都包裹在a中。

以下是一个例子：

ul { padding: 0; list-style-type: none; }
    
li { border: 1px solid #ccc; }

a { display: block; }

span { display: block; background-color: aqua; }

p { margin: 0; background-color: yellow; }

<ul>
    <li>
        <a href="www.google.com">
            <span>span text span text span text</span>
            <p>paragraph content paragraph content paragraph content</p>
        </a>
    </li>
</ul>

关键是将内联元素的默认display值切换为display: block，以便它们扩展li（块级）容器的整个宽度。默认情况下，p已经是一个块元素。但a和span为display: inline，需要进行调整。

Answer 2

这对我有用：

li { position:relative; }
li a { position:absolute; width:100%; height:100%; }

以这种方式＆lt; a＆gt;涵盖整个＆lt; li＆gt;元件。我还建议摆脱＆lt; span＆gt;元素。如果您正在尝试创建空间，只需在＆lt; p＆gt;的顶部添加一些填充。元件。

如何制作锚元素（<a>) the size of a list item (</a> <li> <a>)

2 个答案: