div中内部div横向布局

最新推荐文章于 2025-03-22 20:59:38 发布

转载最新推荐文章于 2025-03-22 20:59:38 发布

· 1.2w 阅读

6 ·

版权

原文链接：https://my.oschina.net/fxtxz2/blog/1828918

文章标签：

#javascript #ViewUI

这篇博客探讨了如何使用CSS实现div内部两个标签横向排列的问题。通过设置父div的display属性为flex，并调整子元素的white-space属性，可以达到预期的布局效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

为什么80%的码农都做不了架构师？>>>

问题

想要实现div内部两个标签横向排列

示例

CSS

.line_file {
  display: block;
  white-space: nowrap;
  width: 80%;
  border: 1px dashed #ddd;
}

.line_file_content {
  display: inline-block;
  width: 90%;
}

.line_file_delete {
  display: inline-block;
  text-align: center;
  width: 10%;
  background-color: #d3d3d3;
}

HTML

<div class="line_file">
  <label class="line_file_content"></label>
  <div class="line_file_delete"></div>
</div>

在line_file中设置父div的css属性为：

display: block;
white-space: nowrap;

在line_file_content和line_file_delete两个子标签的css属性为：

display: inline-block;

上述CSS属性作用如下:

display

display 属性用于定义建立布局时元素生成的显示框类型。

值	说明
block	此元素将显示为块。
inline-block	行内块元素。（CSS2.1 新增的值）

white-space

white-space 属性设置如何处理元素内的空白。

值	说明
nowrap	文本不会换行，文本会在在同一行上继续，直到遇到 `<br>`标签为止。

最终效果

子label class="line_file_content"效果子div class="line_file_delete"效果父div class="line_file"效果

参考: css速查

转载于:https://my.oschina.net/fxtxz2/blog/1828918