为什么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>`标签为止。

最终效果

参考: css速查

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

div中内部div横向布局相关推荐

设置div中的div居中显示
设置div中的div居中显示方法一. <div class='big'><div class='small'>box1</div></div>styl ...
让DIV中的DIV居中显示
最近项目上的问题大部分都是前端页面的问题,所以我自然就跑去修改前端代码了, 发现前端div中的div不是居中显示的,网上说将父级DIV设置为text-align:center 子级设置为margin: ...
div中嵌套div水平垂直居中
div中嵌套一个居中的div有很多方法,如果不想调整边距,有一个简单的方法: 1 <div align="center" style="width: 200px;h ...
html div中水平居中,如何在另一个div中水平居中div？
我怎么能水平居中一个另一个内使用CSS(如果它甚至有可能)? Foo foo 您可以将此CSS应用于内部 :#inner { width: 50%; margin: 0 auto; } 当然,您不 ...
实现div中的div水平垂直居中
方法一利用transform实现div居中,要先设置定位 css .outer {width: 500px;height: 200px;background-color: green;positio ...
vue中的横向排列_如何让div中的内容横向排列
展开全部一.问题可能涉及到了浮动和行内元素两个知识点,首先需要div布局,写一个大的div作为父级盒子,里e5a48de588b662616964757a686964616f313333633839 ...
让 div中的div垂直居中的方法！！同样是抄袭来的(*^__^*)
同样 ,水平居中很简单,给子div设置margin:0px auto; 垂直居中也不难::给父div设置display:table-cell;vertical-align:middle; 重点是dis ...
html中两个div垂直居中对齐,在div中垂直居中的两个元素
桃花长相依如何对元素进行垂直.水平或两者的居中这里有两种在div中对div进行中心化的方法.一种使用CSS的方法柔性箱另一种方式是使用CSS工作台和定位财产.在这两种情况下,居中的div的高度都可以 ...
设置DIV中的select水平垂直居中
设置select在div中水平居中 <div style="position: relative"><select class="select" ...

div中内部div横向布局

问题

示例

CSS

HTML

display

white-space

最终效果

div中内部div横向布局相关推荐

最新文章

热门文章