代码之家 › 专栏 › 技术社区 › anivas

flex上的div文本对齐

flexbox css html

anivas · 技术社区 · 10 年前

如何对齐div,使两个标签具有相同的宽度和右对齐,并且两个内容从同一位置开始。有人建议 float ,但我不喜欢浮动内容。有灵活的方法来做这件事吗。

<!DOCTYPE HTMML>
<html>
<body>
    <div>
        <div style="display: flex; flex-direction:row;">
            <div style="align: right; background: blue">
                Long label:
            </div>
            <div style="text-align: left; background: green">
                This is the content
            </div>
        </div>  

        <div style="display: flex; flex-direction:row;">
            <div style="align: right; background: blue">
                label:
            </div>
            <div style="text-align: left; background: green">
                This is the content
            </div>
        </div>  
    </div>
</body>
</html>

2 回复 | 直到 10 年前

Paulie_D 10 年前

使用flexbox。。。不 …除非你使用固定的宽度值(不管它们是什么),否则你不能……非兄弟姐妹之间没有宽度/高度相等。

您需要给其中一个元素一个固定的宽度值,然后让另一个元素用 flex:1 .

.blue {
  background: lightblue;
  /* width: 150px; */
  flex: 0 0 150px
}
.green {
  background: #bada55;
  flex: 1;
}
.parent {
  display: flex;
}

<div class="parent">
  <div class="blue">
    Long label:
  </div>
  <div class="green">
    This is the content
  </div>
</div>

<div class="parent">
  <div class="blue">
    label:
  </div>
  <div class="green">
    This is the content
  </div>
</div>

Stephen 10 年前

为什么不简单地在内容和标签div中添加一个类呢?

HTML语言

<div>
<div>
    <div class="label-div">Long label</div>
    <div class="content-div">Content</div>
</div>
<div>
    <div class="label-div">Label</div>
    <div class="content-div">Content</div>
</div>
</div>

CSS公司

.label-div {
   width: 70px;
   text-align: right;
}

.content-div {
   text-align: left;
}

这样,可以确保所有标签div的长度相等。

推荐文章

code-geek · Jquery根据单选按钮选择隐藏或显示文本字段

1 年前

Jamie · 在CSS链接的文件名中添加Jinja占位符

1 年前

ptownbro · 重叠分区标签,同时保持以下所有分区和内容就位

1 年前

Luke Frost IEng MIMechE · Bootstrap 5.3在Div中的项目位置没有如我所期望的那样显示

1 年前

Reegan · 使用Angular ngFor指令在html中渲染嵌套对象值

1 年前

wqyutv · 当找不到文件时,任何破坏错误的东西都不会出现,我该怎么解决这个问题?

1 年前

user29519291 · 为不同的变量创建一个带有可重用Click函数的简单菜单

1 年前

Gukkey · 在React中明确隐藏日期类型输入后,如果我单击父div,如何显示日期选择器?

1 年前

Lorenzo Bertolaccini · 在Angular项目中通过对话框后,在控制台中显示但在HTML中不显示的数据数组

1 年前

john Rizzo · 按钮背景颜色、悬停和活动状态存在问题

1 年前