[問題] li多到超過一個頁面時，換行問題

[luxgenius (混合水果)]

各位先進好

最近遇到一個問題，上來請教大家一下

<div>
        <li>
                <input  />
                <input  />
        </li>

        <li>
                <input />
                <input />
        </li>
                .
                .
                .
        <li>
                <input  />
                <input  />
        </li>

</div>


我的頁面架構如上面的html，目前當我的<li></li>元素的數量超過

瀏覽器的一個頁面的y軸長度時，會自動顯示y軸滾軸

我想請教的是，我可不可以當<li></li>元素多到y軸一個頁面裝不下時，

不要在繼續垂直增加（y軸），而可以自動換到隔壁一行（x軸方向）繼續顯示

我有試著把div設定height，可是<li></li>會把div撐爆，根本不受限於div的大小...

請問有什麼好方法可以解決嗎，謝謝！！

--
※ 發信站: 批踢踢實業坊(ptt.cc) 
◆ From: 111.242.6.249
推 coldollsheep:= =有沒有一個笨方法是你先算幾個會超過 然後超過
→ coldollsheep:你就做你要做的事
推 EROS4:你要讓li並排就得要display:inline外加float:left
推 EROS4:或是可以取消float，改用display:inline-box外加colums跟
→ EROS4:overflow:hidden，這樣就可達到你的目的 但FF跟IE不支援
→ luxgenius:主要是因為我的li元素是動態增加的 所以先算好 行不通
→ luxgenius:我如果用float的話 我好像需要把我的li分成兩個div
→ luxgenius:這兩個div在用float來達成 可是我的li不能被切成兩個div
→ luxgenius:我的li是經由drag and drop增加的 我想保持只有一個div
→ luxgenius:我如果不要用li改用別的標籤 可以達成嗎？
推 EROS4:改用別的是可以達成啦，不過會變成並排，不會固定排成兩列
→ EROS4:要排成兩列or三列還是要用columns 只是FF跟IE還不支援
→ luxgenius:謝謝E大提供的想法，我來試試column！
推 Fantasywind:d & d 綁class應該就可以吧 動態新增也可以動態計算阿
→ luxgenius:F大的計算是指超過一個頁面時 自動分成兩個div這樣嗎？
推 Fantasywind:嗯 然後綁定d & d事件 不過這就是靠js 感覺不聰明XD
→ luxgenius:嗯嗯 這個方法我用試著用過 可是我的li還要存進mysql
→ luxgenius:而且是有序的 分多個div處理 可以說是相當的麻煩 ...
推 Fantasywind:多個div用同個class應該不麻煩吧?
→ luxgenius:因為我的li會動態增加 如果加到第一列時 超出一個頁
→ luxgenius:我要把全部的li收集回來 在重新切一次div...
→ luxgenius:最偷懶的方式 就是全部只用一個div 分列看可不可以用css
→ luxgenius:讓瀏覽器自己去解決XD
推 evenwu:印象中你的需求有js
→ aceone:ul 設定寬度就可以了不是嗎?
→ luxgenius:我的需求有用到js跟php與mysql
→ luxgenius:我把ul寬度加大時 發現li元素在塞滿一個頁面時 還是不會
→ luxgenius:換行顯示 會一直往Y軸填充
→ luxgenius:我這邊的換行是指直書的換行喔...跟寫作文一樣
推 EROS4:設定寬度沒用啦 li元素是block元素 一個就佔一整條了
→ luxgenius:我現在想法是用column然後用js去動態改變style
→ luxgenius:可是DOM.style的object好像沒有包涵column...
→ luxgenius:另外一種土法煉鋼就是準備好幾個CSS用JS去換 崩潰...
→ luxgenius:不要用li元素去包的話 用什麼元素可以達成呢？
推 EROS4:不用動態改變吧 在ul親目錄div的css裡面加上column-count:2
→ EROS4:就會分成左右兩半部了吧？ 左邊滿了才會去右邊
→ EROS4:ff跟webkit要加prefix -moz-跟-webkit-
→ luxgenius:我的li會一直增加 兩行不一定裝的下 所以需要動態改變
→ luxgenius:column-count:x x計算得知...很謝謝E大
→ luxgenius:還有謝謝大家的想法建議！！