Question

我有两个不同的问题。第一个真的很烦人。我试图将文本与第一个框内的图像对齐，以便它们并排呈内联方式。我不确定我做错了什么，我不想使用花车。

其次，我试图在悬停时将图像放到x轴上的transform: translate。问题是，我希望transform上的图像.extra-box:hover ...而不是实际图像，但我只希望图像移动。我无法弄清楚这一点。

我做错了什么？

#extra {
	margin: 25px auto;
	width: 460px;
	height: auto;
}
.extra-box {
	position: relative;
	width: 40%;
	padding: 8px;
	border-radius: 3px;
	/*border: 1px solid #739BAF;*/
	border: 2px solid black;
	display: inline-block;
	background: none;
	transition: 0.5s ease;
}
.extra-box:hover {
	border: 2px solid red;
	transition: 0.5s ease;
}
.extra-box:first-child {
	margin-left: 0;
	width: 40%;
	margin-right: 10%;
}
.extra-box:last-child {
	width: 40%;
}
.extra-box a {
	text-decoration: none;
}
.extra-box-text {
	color: black;
	font-size: 1em;
	display: inline-block;
	width: auto;
}
.extra-box-icon img {
	padding-left: 5px;
	width: 15px;
	height: auto;
	display: inline-block;
	-webkit-transition: all .5 ease-in-out;
    transition: all .5 ease-in-out;
	/*transform: translateX(30px);
	-webkit-transform: translateX(30px);*/
}

		<div id="extra"><div class="extra-box">
				<a href="contact">
					<div class="extra-box-text">Need help?<br>Contact Us Now</div><div class="extra-box-icon"><img src="icons/right-arrow.png"></div>
				</a>
			</div><div class="extra-box">
				<a href="register">
					<div class="extra-box-text">Need an account?<br>Register Now</div>
				</a>
			</div>
		</div>

Answer 1

正如其他答案所指出的那样，你错过了一个显示：inline-block，但问题出在.extra-box-icon

我还添加了图像的变换:(参见CSS的开头）

.extra-box-icon {
  display: inline-block;
}
img {
  transition: transform 1s;  
}
.extra-box:hover img {
    transform: translateX(-100px);  
}
#extra {
  margin: 25px auto;
  width: 460px;
  height: auto;
}
.extra-box {
  position: relative;
  width: 40%;
  padding: 8px;
  border-radius: 3px;
  /*border: 1px solid #739BAF;*/
  border: 2px solid black;
  display: inline-block;
  background: none;
  transition: 0.5s ease;
}
.extra-box:hover {
  border: 2px solid red;
  transition: 0.5s ease;
}
.extra-box:first-child {
  margin-left: 0;
  width: 40%;
  margin-right: 10%;
}
.extra-box:last-child {
  width: 40%;
}
.extra-box a {
  text-decoration: none;
}
.extra-box-text {
  color: black;
  font-size: 1em;
  display: inline-block;
  width: auto;
}
.extra-box-icon img {
  padding-left: 5px;
  width: 15px;
  height: auto;
  display: inline-block;
  -webkit-transition: all .5 ease-in-out;
  transition: all .5 ease-in-out;
  /*transform: translateX(30px);
	-webkit-transform: translateX(30px);*/
}

<div id="extra">
  <div class="extra-box">
    <a href="contact">
      <div class="extra-box-text">Need help?
        <br>Contact Us Now</div>
      <div class="extra-box-icon">
        <img src="icons/right-arrow.png">
      </div>
    </a>
  </div>
  <div class="extra-box">
    <a href="register">
      <div class="extra-box-text">Need an account?
        <br>Register Now</div>
    </a>
  </div>
</div>

Answer 2

在 .extra-box 类中添加vertical-align:top;，将其与同一级别对齐。

Answer 3

修复对齐问题，如果您不想使用float，可以将.extra-box-text和extra-box-text img的显示属性更改为inline-block

.extra-box-text, .extra-box-text img{
    display:inline-block;
    width: /*adjust as needed*/ 
}

处理动画，我建议您将图像本身设置为.extra-box的背景，然后在悬停时更改背景位置

希望这有帮助

悬停时的图像转换

3 个答案: