html - 使用 :hover while it's expanding width 正确居中元素

Question

当您将焦点或悬停在输入上时，我希望将输入完全居中。

因此我希望它在中间而不是在右边扩展宽度或使其看起来像它的东西。

代码:

.container {
   margin-top: 10px;
   margin-left: auto;
   margin-right: auto;
   width: 142px;
}

.textbox { 
   border: 1px solid #848484; 
   outline: 0; 
   height: 25px; 
   width: 125px; 
   padding: 2px 20px 2px 20px;
  }
  
input { 
   text-align: center;
   width: 100px;
   transition: ease-in-out, width .35s ease-in-out;
   margin-bottom: 3px;
   margin-top: 3px;
}

input:hover, input:focus { 
   width: 150px;
   margin-bottom: 3px;
   margin-top: 3px;
}

<div class="container">
   <input type="text" class="textbox" placeholder="Some text in here!">
</div>

Answer 1

您遇到的问题是由 .container 的固定宽度值引起的，该值小于您在 :hover 上应用到输入的宽度。

消除固定宽度并应用 text-align: center 属性(使输入居中)会导致悬停效果按预期运行

.container {
	margin-top: 50px;
	margin-left: auto;
	margin-right: auto;
	text-align: center;
}

.textbox { 
   border: 1px solid #848484; 
   -moz-border-radius-topleft: 30px;
   -webkit-border-top-left-radius: 30px;
   border-top-left-radius: 30px;
   -moz-border-radius-topright: 30px;
   -webkit-border-top-right-radius: 30px;
   border-top-right-radius: 30px;
   outline: 0; 
   height: 25px; 
   width: 125px; 
   padding: 2px 20px 2px 20px;
  }
  
input { 
   text-align: center;
   width: 100px;
   transition: ease-in-out, width .35s ease-in-out;
   margin-bottom: 3px;
   margin-top: 3px;
}

input:focus { 
   width: 150px;
   margin-bottom: 3px;
   margin-top: 3px;
}

input:hover { 
   width: 150px;
   margin-bottom: 3px;
   margin-top: 3px;
}

/* Ignore this */

p {
  margin-top: 30px;
  color: #a6a6a6;
  text-align: center;
}

<!-- Thanks for helping :p !-->

<div class="container">
   <input type="text" class="textbox" placeholder="Some text in here!">
</div>

<!-- Ignore !-->
<p> So as you can see the width will expand to the right, how would I be able to center it while it's moving and keeping it centered?</p>