Warning: file_get_contents(/data/phpspider/zhask/data//catemap/7/css/39.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Css 水平溢出的Div(向右)_Css - Fatal编程技术网

Css 水平溢出的Div(向右)

Css 水平溢出的Div(向右),css,Css,我有一个div,在一个div中有几个输入框,我的div有一个固定的高度。我希望这是溢出的权利,而不是底部 对要水平滚动的内容元素使用display:inline block,并添加white space:nowrap到容器 示例: #容器{ 宽度:500px; 背景色:#CCC; 溢出:自动; 高度:100px; 空白:nowrap; } .目录{ 宽度:200px; 高度:60px; 显示:内联块; 右边距:20px; } #一个{ 背景色:#ABC; 溢出y:自动; 空白:正常; } #

我有一个div,在一个div中有几个输入框,我的div有一个固定的高度。我希望这是溢出的权利,而不是底部


对要水平滚动的内容元素使用
display:inline block
,并添加
white space:nowrap到容器

示例:

#容器{
宽度:500px;
背景色:#CCC;
溢出:自动;
高度:100px;
空白:nowrap;
}
.目录{
宽度:200px;
高度:60px;
显示:内联块;
右边距:20px;
}
#一个{
背景色:#ABC;
溢出y:自动;
空白:正常;
}
#两个{
背景色:#333;
}
#三{
背景色:#888;
}
#四{
背景色:#E29E1E;
}

文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本

为了做到这一点,您必须去除特征线(

),并且必须添加
溢出-x:scroll
到div的css代码

您还需要将输入设置为具有
display:inline块属性

如果要保留特征线,div溢出的唯一方式是div的宽度小于其中的组件(在本例中为输入字段)


删除

有什么问题吗?我添加了
,因为这些项目是动态生成的,并且位于具有固定高度的div内。我希望div向右溢出。生成器不能简单地不生成那些

s吗?如果您想水平对齐文本字段,那么就没有理由出现换行符。谢谢您的回复,但是我希望能够溢出第一个div的内容,假设#一个具有固定的高度。更像是不必使用col-count的列。然后只需给出
overflow-y:auto;空白:正常
to
#one
查看我的更新或jsfiddle:这正是我需要的。很好用!谢谢
<div>
<input type="text"/><br>
<input type="text"/><br>
<input type="text"/><br>
<input type="text"/><br>
<input type="text"/><br>
<input type="text"/><br>
<input type="text"/><br>
<input type="text"/><br>
<input type="text"/><br>
<input type="text"/><br>
<input type="text"/><br>
<input type="text"/><br>
<input type="text"/><br>
div {
  overflow:hidden;
  white-space:nowrap;
  width:200px;
  height:100px;
}