我是html的新手,当div
进入max-height
时,我试图将这些div向右移动。
.List {
overflow: hidden;
max-height: 50px;
}

<ul class="List">
<div> one </div>
<div> two </div>
<div> three </div>
<div> four </div>
<div> five </div>
</ul>
&#13;
它只显示&#34;一,二,三&#34;,我希望另一个也显示出来,而是延伸到页面底部,向右延伸。
答案 0 :(得分:0)
这是因为您将max-height
设置为溢出,以便隐藏其他元素。
你不能直接在ul里面设置div。这不是正确的HTML。
尝试一起使用ul
和li
。
.List {
overflow: hidden;
max-height: 50px;
text-align:right;
}
.List li{
display: inline-block;
}
<ul class="List">
<li> one </li>
<li> two </li>
<li> three </li>
<li> four </li>
<li> five </li>
</ul>
答案 1 :(得分:0)
添加display:inline-block;对于div。
<ul class="List">
<div> one </div>
<div> two </div>
<div> three </div>
<div> four </div>
<div> five </div>
</ul>
{{1}}
希望这有帮助
答案 2 :(得分:0)
.list{
display:flex;
flex-direction:column;
max-height:50px;
flex-wrap:wrap;
}
.list div{
width:50px;
}
<div class="list">
<div>One</div>
<div>Two</div>
<div>Three</div>
<div>Four</div>
</div>
您可以使用flex。
使用属性flex-wrap:wrap;
,您的列表将根据父级高度进行调整。
答案 3 :(得分:0)
如果您的要求是关于,一旦第一列到达var calculator = {
displayer: document.querySelector(".display"),
numbers: document.querySelectorAll(".number"),
keys: document.querySelectorAll(".key"),
inputting: function(){
for (var key in this.keys) {
key.addEventListener("click", function(){
this.displayer.innerHTML += key.innerHTML;
})
}
},
}
剩下的东西应该移到第二列,那么您可以使用max-height
来完成。
添加flex
和flex-flow:column wrap`将帮助您将内容传输到下一列。
display: flex
.List {
overflow: hidden;
max-height: 60px;
border: 1px solid #ccc;
display: -webkit-flex;
display: flex;
-webkit-flex-flow: column wrap;
flex-flow: column wrap;
}
答案 4 :(得分:0)
不允许Div作为ul的直接子女
因此更改ul
的{{1}}或div
的{{1}},并使用display block propertie将元素显示为块元素。
divs
&#13;
li
&#13;
答案 5 :(得分:0)
首先,您的HTML代码中存在语义问题。
HTML规范不允许作为子项放入ul
(未排序列表)div
元素。
您必须为此项目使用<li>
(列表项)标记。
对于您的任务,您可以使用flexboxes。
通过设置display: flex
来设置元素flex。
然后使用flex-flow
属性指定您希望子元素作为列,并在它们不适合目标块的高度时进行换行。
要使用此决定,请确保您需要的所有浏览器都支持Flexbox格式化。 要查看此内容,请使用caniuse服务。
要使flexbox在不同的浏览器引擎上工作,请同样使用autoprefixer代码:http://autoprefixer.github.io/
实施例:
body {
padding: 10px;
}
.list {
background: #fff;
overflow: hidden;
max-height: 60px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
display: -webkit-flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-flow: column wrap;
flex-flow: column wrap;
}
<div class="list">
<div> one </div>
<div> two </div>
<div> three </div>
<div> four </div>
<div> five </div>
</div>
此外,如果您想将项目分组到列中,可以使用CSS3 Multicolumn Layout