两列对齐的问题

zore_0

425

发布于
2019-08-19

新手上路，请多包涵

如何实现下图的布局
图片描述

css html

阅读 3.3k

2 个回答

得票最新

牛书书

10.1k72035

发布于
2019-08-19

✓ 已被采纳

每一行左侧定宽，文字靠右就可以了吧？

<div class="container">
  <div class="item">
    <div class="label">姓名</div>
    <div class="content">
      木马啊
    </div>
  </div>
  <div class="item">
    <div class="label">你的身份证号码</div>
    <div class="content">xxx</div>
  </div>
  <div class="item">
    <div class="label">居住地址</div>
    <div class="content">xxxx</div>
  </div>
</div>

.item {
  display: flex;
  margin: 2px;
}

.label {
  width: 150px;
  text-align: right;
  margin-right: 10px;
  flex-shrink: 0
}

.content {
  flex: auto;
  border: 1px solid #3361d8;
  padding: 2px;
}