个人中心
文章发布
退出
作者热门文章
- android - 多次调用 OnPrimaryClipChangedListener
- android - 无法更新 RecyclerView 中的 TextView 字段
- android.database.CursorIndexOutOfBoundsException : Index 0 requested, 光标大小为 0
- android - 使用 AppCompat 时，我们是否需要明确指定其 UI 组件(Spinner、EditText)颜色
24
4
我不知道如何用文字简洁地描述我想要实现的目标，所以这里是一张ASCII图片:
(+1) | Enter your phone number |
| Enter your name |
我有两个 <input> s，一个是电话号码，一个是姓名。这些应该水平对齐(在同一“列”中)。
我还有一个 <span> (国家代码，必须与电话号码一起输入的另一条数据)。这应该“挂断”左侧输入的电话号码。
我想将国家/地区代码垂直居中，以便它显示在电话号码输入的中间。
这似乎可以通过 CSS Grid 实现。我在想:有没有不涉及 CSS Grid 的解决方案？
这是我目前所拥有的片段。我正在使用“大小零position:relative元素，其内容位于一个position:absolute子元素”技术从流中排除“国家代码”元素，因此它不会破坏水平对齐。
如您所见，它没有将国家/地区代码垂直居中。
input {
height: 2rem;
}
.container {
margin-left: auto;
margin-right: auto;
text-align: center;
}
.phone-number-input-container {
display: inline-flex;
align-items: center;
}
.name-input-container {
margin-top: 1rem;
}
.country-code-container {
position: relative;
width: 0;
height: 0;
}
.country-code {
position: absolute;
right: 1rem;
}<html>
<body>
<div class='container'>
<div class='phone-number-input-container'>
<span class='country-code-container'>
<b class='country-code'>+1</b>
</span>
<input class='input' placeholder="Phone number"></input>
</div>
<div class='name-input-container '>
<input class='input' placeholder="Name"></input>
</div>
</div>
</body>
</html>最佳答案
你差不多好了，只需在上层容器上使用 position:absolute 并且只调整 left 值，因为 flexbox 已经垂直居中(所以不需要设置 top )
input {
height: 2rem;
}
.container {
margin-left: auto;
margin-right: auto;
text-align: center;
}
.phone-number-input-container {
display: inline-flex;
align-items: center;
position:relative;
}
.name-input-container {
margin-top: 1rem;
}
.country-code-container {
position: absolute;
left:-2rem;
}<html>
<body>
<div class='container'>
<div class='phone-number-input-container'>
<span class='country-code-container'>
<b class='country-code'>+1</b>
</span>
<input class='input' placeholder="Phone number">
</div>
<div class='name-input-container '>
<input class='input' placeholder="Name">
</div>
</div>
</body>
</html>另一个想法是像下面这样考虑负边距，你不再需要 position:absolute
input {
height: 2rem;
}
.container {
margin-left: auto;
margin-right: auto;
text-align: center;
}
.phone-number-input-container {
display: inline-flex;
align-items: center;
position:relative;
}
.name-input-container {
margin-top: 1rem;
}
.country-code-container {
margin-left:-30px;
margin-right:30px;
width:0;
}<html>
<body>
<div class='container'>
<div class='phone-number-input-container'>
<span class='country-code-container'>
<b class='country-code'>+1</b>
</span>
<input class='input' placeholder="Phone number">
</div>
<div class='name-input-container '>
<input class='input' placeholder="Name">
</div>
</div>
</body>
</html>您还可以进行翻译:
input {
height: 2rem;
}
.container {
margin-left: auto;
margin-right: auto;
text-align: center;
}
.phone-number-input-container {
display: inline-flex;
align-items: center;
position:relative;
}
.name-input-container {
margin-top: 1rem;
}
.country-code-container {
transform:translateX(-30px);
width:0;
}<html>
<body>
<div class='container'>
<div class='phone-number-input-container'>
<span class='country-code-container'>
<b class='country-code'>+1</b>
</span>
<input class='input' placeholder="Phone number">
</div>
<div class='name-input-container '>
<input class='input' placeholder="Name">
</div>
</div>
</body>
</html>关于html - 垂直对齐一个元素，该元素 "hangs off"一个与其同伴水平对齐的 div，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/55192441/
24
4
0
关于 ScalaMock 模拟(同伴)对象和构造函数的能力，存在一些相互矛盾的说法。页面ScalaMock step-by-step州 它还可以模拟: 类(class)*单例和伴生对象(静态方法) 对
关于 ScalaMock 模拟(同伴)对象和构造函数的能力，存在一些相互矛盾的说法。页面ScalaMock step-by-step州 它还可以模拟: 类(class)*单例和伴生对象(静态方法) 对
我是一名优秀的程序员,十分优秀！