html 如何让item自动继承container的padding？

gzszwxb4 于 2023-11-15 发布在其他

关注(0)|答案(1)|浏览(118)

我试着做一个这样的按钮：

的数据
悬停时：

的
到目前为止，它已经在桌面上工作，代码如下：

.white-button-arrow {
    width: 70%;
    height: 75px;
    font-size: 16px;
    border-radius: 10px;
    border: solid 3px #000000;
    cursor: pointer;
    position: relative;
    background: white;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0;
    transition: all 0.3s ease;
}

.white-button-arrow-text {
    padding-left: 10px;
    font-family: Friends-UltraBold !important;
    font-size: 200%;
}

.white-button-arrow-icon {
    font-size: 200%;
    position: relative;
    border-left: 1px solid #ffffff29;
    border-radius: 0 10px 10px 0;
    padding: 20px 20px 22px 20px;
    background: #000000;
    color: #fff;
    transition: all 0.3s ease;
    transform-origin: right;
}

.white-button-arrow:hover .white-button-arrow-icon {
    color: #ff5a45;
    padding-left: 10%;
    text-indent: -60%;
}

.white-button-arrow:hover {
    background: #ff5a45;
}

个字符
正如你所看到的，这不是一个很好的解决方案，因为我仍然是手动放入填充。当我试图缩小它以用于移动的版本时，它变成这样：

的
然后我意识到，它可能无法正常工作，因为有这么多不同的屏幕尺寸，这导致了一个问题：有没有一种方法可以让右边箭头部分的黑框自动填充容器的任何尺寸？

Html

来源：https://stackoverflow.com/questions/77444342/how-to-make-items-automatically-inherit-padding-from-container

1条答案

按热度按时间

oewdyzsn1#

您可以设置height: 100%，而不是使用padding将.white-button-arrow-icon的文本内容居中，以便它填充其容器内的空间。
在这里，我稍微简化了场景，删除了不需要的样式，并添加了一个div容器，将>文本 Package 在其中。

.white-button-arrow {
  display: flex;
  justify-content: space-between;
  align-items: center;
  
  cursor: pointer;
  padding: 0;
  width: 70%;
  height: 75px;
  background: white;
  font-size: 16px;
  border: solid 3px black;
  border-radius: 10px;
  
  transition: all 0.3s ease;
}

.white-button-arrow-text {
  padding-left: .5em;
  font-family: Friends-UltraBold;
  font-size: 2em;
}

.white-button-arrow-icon {
  display: flex;
  align-items: center;
  
  height: 100%;
  font-size: 2em;
  padding: 0 0.5em;
  background: black;
  color: white;
  transition: all 0.3s ease;
  transform-origin: right;
}

.white-button-arrow:hover .white-button-arrow-icon {
  color: #ff5a45;
  padding-left: 10%;
  text-indent: -60%;
}

.white-button-arrow:hover {
  background: #ff5a45;
}

个字符
因为你在你的pitures中显示了两次箭头看起来像一个实际的箭头，而不是我在上面的例子中改为>的>，这里我展示了如何使用一个fontawesome arrow-right。

.white-button-arrow {
  cursor: pointer;
  width: 70%;
  height: 75px;

  display: flex;
  justify-content: space-between;
  align-items: center;
    
  padding: 0;  
  background: white;
  font-size: 16px;
  border: solid 3px black;
  border-radius: 10px;
  
  transition: all 0.3s ease;
}

.white-button-arrow-text {
  padding-left: .5em;
  font-family: Friends-UltraBold;
  font-size: 2em;
}

.white-button-arrow-icon {
  display: flex;
  align-items: center;
  
  height: 100%;
  font-size: 2em;
  padding: 0 .5em;
  background: black;
  color: white;
  transition: all 0.3s ease;  
}

.white-button-arrow:hover .white-button-arrow-icon {
  color: #ff5a45;
  padding-left: 10%;
  text-indent: -60%;
}

.white-button-arrow:hover {
  background: #ff5a45;
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css" integrity="sha512-z3gLpd7yknf1YoNbCzqRKc4qyor8gaKU1qmn+CShxbuBusANI9QpRohGBreCFkKxLhei6S9CQXFEbbKuqLg0DA==" crossorigin="anonymous" referrerpolicy="no-referrer" />

<button class="white-button-arrow"> 
  <span class="white-button-arrow-text">
    <b>GOOGLE-MAPS</b>
  </span> 
  <span class="white-button-arrow-icon">      
    <i class="fa-solid fa-arrow-right"></i>      
  </span>
</button>

赞(0）回复(0）举报 2023-11-15

我来回答

html 如何让item自动继承container的padding？

1条答案

相关问题

热门标签

最新问答