时间戳

首页 > 解决方案 > 如果我在按钮中有一个图像，并且按钮的宽度在悬停时增加，我如何将图像的位置固定在最初的位置？

html - 如果我在按钮中有一个图像，并且按钮的宽度在悬停时增加，我如何将图像的位置固定在最初的位置？

问题描述

当我将鼠标悬停在按钮上时，它会根据需要改变宽度，但是图像会向中心移动。我想把它固定在左边，这样当按钮的宽度改变时它就不会移动。这是我的代码。我正在使用 React 构建：

<div>
        <button
          className={
            this.state.activecut === true
              ? "designstudiobuttonleftopactive"
              : "designstudiobuttonlefttop"
          }
          onClick={this.cutActiveHandler}
        >
          <img src={shirtlogo} id="cutlogo" alt="" />
        </button>
</div>

.designstudiobuttonlefttop {
 width: 60px;
 height: 60px;
 margin-top: 150px;
 display: block;
 border: 1px solid #574904;
 border-radius: 50%;
 background-color: white;
 color: #574904;
 text-align: center;
 margin-left: 50px;
 }

.designstudiobuttonlefttop:hover {
  background-color: #f2f2f2;
  color: #574904 !important;
  text-decoration: underline;
  transition-delay: 100ms !important;
  cursor: pointer !important;
  width: 200px;
  border-radius: 50px 50px 50px 50px;
}

#cutlogo {
  width: 50px;
  height: 50px;
  padding-right: 5px;
}

.designstudiobuttonleftopactive {
  color: #574904 !important;
  border: none;
  background-color: white;
  text-align: center;
  text-decoration: underline;
  cursor: pointer;
  margin-top: 100px;
  display: block;
  margin-left: 50px;
}

标签： htmlcssreactjs

解决方案

用于float: left将其保留在按钮的左侧。

.designstudiobuttonlefttop {
 width: 60px;
 height: 60px;
 margin-top: 150px;
 display: block;
 border: 1px solid #574904;
 border-radius: 50%;
 background-color: white;
 color: #574904;
 text-align: center;
 margin-left: 50px;
 }

.designstudiobuttonlefttop:hover {
  background-color: #f2f2f2;
  color: #574904 !important;
  text-decoration: underline;
  transition-delay: 100ms !important;
  cursor: pointer !important;
  width: 200px;
  border-radius: 50px 50px 50px 50px;
}

#cutlogo {
  width: 50px;
  height: 50px;
  padding-right: 5px;
}

.designstudiobuttonleftopactive {
  color: #574904 !important;
  border: none;
  background-color: white;
  text-align: center;
  text-decoration: underline;
  cursor: pointer;
  margin-top: 100px;
  display: block;
  margin-left: 50px;
}
<div>
        <button
          class="designstudiobuttonlefttop"
          onClick={this.cutActiveHandler}
        >
          <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcT6vxI3cA6w8ocAr3KWNHdMmq5gkkhYSuacNYaFCrQxZmeBUo2m" id="cutlogo" alt="" width="40" height="40" style="float: left;"/>
        </button>
</div>

推荐阅读