所以我有这个 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
会 overflow hidden ,但它只是将标签推到一行。
谁能帮忙?
最佳答案
使用 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>
关于html - 如何让输入框有一定的长度?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53451238/