如何使输入框具有一定的长度?

时间:2018-11-23 18:06:23

标签: html css alignment

所以我有这个HTML / CSS,

input {
  box-shadow: 2px 4px 25px rgba(0, 0, 0, .1);
  height: 35px;
  width: 400px;
  overflow: hidden;
  border: none;
  padding-left: 10px;
  background-color: rgba(240, 240, 240);
  margin-right: 30px;
  overflow: hidden;
}
label {
  margin: 30px;
}
<p><label for="mobTag"><strong>Mob Tag</strong> = <input type="text" id="mobTag" placeholder="My Mob" name="mobTag"></label></p>

<p><label for="chestName"><strong>Chest Name</strong> = <input type="text" id="chestName" placeholder="empty" name="chestName"></label></p>
如您所见,标签对齐得很好,但是我正在尝试使input的结尾也对齐。我尝试增加width,希望margin-right可以隐藏溢出,但只会将标签向上推。 有人可以帮忙吗?

1 个答案:

答案 0 :(得分:0)

使用flex

p {width:50%; margin:1rem auto}

input {
  box-shadow: 2px 4px 25px rgba(0, 0, 0, .1);
  height: 35px;
  border: none;
  margin-left:.5rem;
  padding-left: 10px;
  background-color: rgba(240, 240, 240);
  flex:1 0;
}

label {
  display: flex;
  align-items:center;
  margin: 30px;
}

strong {
  flex: 0 0 auto;
  margin-right:.5rem;
}
<p><label for="mobTag"><strong>Mob Tag</strong> = <input type="text" id="mobTag" placeholder="My Mob" name="mobTag"></label></p>

<p><label for="chestName"><strong>Chest Name</strong> = <input type="text" id="chestName" placeholder="empty" name="chestName"></label></p>