javascript - 如何保持相同的填充

Question

如何让方框 1、2、3 保持相同大小？即使文本脱离框，也没关系，因为它们会更大。

.this-p {
  background-color: #4CAF50;
  border: none;
  color: white;
  padding: 0px 0px;
  padding-bottom: 0px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 15px;
  margin: 20px 50px;
  cursor: pointer;
  line-height: 2;
  border-radius: 0%;
  width: auto -webkit-box-sizing: border-box;
}

<section id="four" class="wrapper style3 special">
  <div class="container">
    <header class="major">
      <h2>hora de abrir a carteira</h2>
      <p>bora espiar ao vivo? ;)</p>
    </header>
    <ul class="actions">
      <p class="this-p"> <br> <span class="this-span"> PLANO BÁSICO </br> </span> 15 minutos </br>
        Janela fechada </br>
        Persiana 3/4 fechada </br>
      </p>
      </a>
      </li>
      <p class="this-p"> <br> <span class="this-span"> PLANO NA MÉDIA </br> </span> 30 minutos </br>
        Janela meia fechada </br>
        Persiana 2/4 fechada </br>
      </p>
      </a>
      </li>
      <p class="this-p"> <br> <span class="this-span"> PLANO TOP </br> </span> 60 minutos </br>
        Janela totalmente aberta </br>
        Persiana aberta </br>
      </p>
      </a>
      </li>
    </ul>
  </div>
</section>

ps:还有，有什么方法可以删除那些框上的可点击选项吗？我不知道我是否必须找到 parent 或其他什么。谢谢。

Answer 1

如果你想让元素有相同的宽度，你需要定义它。删除 coursor: pointer 会删除“可点击”指针。

关键部分

.this-p {
  width: 150px;
  ...
}

片段

.this-p {
  width: 150px;
  background-color: #4CAF50;
  border: none;
  color: white;
  padding: 0px 0px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 15px;
  margin: 20px 50px;
  line-height: 2;
  border-radius: 0%;
  width: auto -webkit-box-sizing: border-box;
}

<section id="four" class="wrapper style3 special">
  <div class="container">
    <header class="major">
      <h2>hora de abrir a carteira</h2>
      <p>bora espiar ao vivo? ;)</p>
    </header>
    <ul class="actions">
      <p class="this-p"> <span class="this-span"> PLANO BÁSICO </br> </span> 15 minutos </br>
        Janela fechada </br>
        Persiana 3/4 fechada </br>
      </p>
      </a>
      </li>
      <p class="this-p"> <span class="this-span"> PLANO NA MÉDIA </br> </span> 30 minutos </br>
        Janela meia fechada </br>
        Persiana 2/4 fechada </br>
      </p>
      </a>
      </li>
      <p class="this-p"> <span class="this-span"> PLANO TOP </br> </span> 60 minutos </br>
        Janela totalmente aberta </br>
        Persiana aberta </br>
      </p>
      </a>
      </li>
    </ul>
  </div>
</section>