div内部改为横向_DIV横向布局的几种方法

1.使用display: inline;将块级元素转变为行内元素:

CSS

.item-test{

border: 1px solid black;

padding: 7px;

cursor: pointer;

/*display: table-cell;*/

/*float: left;*/

width: 12px;

height:214px;

display: inline;

}

HTML

缺点:虽然可以做到横向布局,但是不能设置宽度和高度,padding和margin也是没有用,如果需要border就更加不堪入目:

而且,一旦你在使用了display:inline;的元素内添加块级元素,display:inline就会失效,变回块级元素的效果。

2. 使用display: table-cell;模拟table的元素:

这种方法比第一种方法要好很多,可以调是高度和宽度,padding也可以用,但是不能用margin(想想也明白,对td(table-cell就是模拟td)使用margin本来就不行)

.item-test{

border: 1px solid black;

padding: 7px;

cursor: poin

你可能感兴趣的:(div内部改为横向)