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

看板Web_Design作者 (混合水果)時間13年前 (2012/03/19 18:53), 編輯推噓10(10推 0噓 30→)
留言40則, 6人參與, 最新討論串1/1
各位先進好 最近遇到一個問題，上來請教大家一下 <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
推
03/19 20:27, , 1F
= =有沒有一個笨方法是你先算幾個會超過 然後超過
03/19 20:27, 1F
→
03/19 20:27, , 2F
你就做你要做的事
03/19 20:27, 2F
推
03/19 20:35, , 3F
你要讓li並排就得要display:inline外加float:left
03/19 20:35, 3F
推
03/19 20:39, , 4F
或是可以取消float，改用display:inline-box外加colums跟
03/19 20:39, 4F
→
03/19 20:40, , 5F
overflow:hidden，這樣就可達到你的目的 但FF跟IE不支援
03/19 20:40, 5F
→
03/19 20:48, , 6F
主要是因為我的li元素是動態增加的 所以先算好 行不通
03/19 20:48, 6F
→
03/19 20:53, , 7F
我如果用float的話 我好像需要把我的li分成兩個div
03/19 20:53, 7F
→
03/19 20:54, , 8F
這兩個div在用float來達成 可是我的li不能被切成兩個div
03/19 20:54, 8F
→
03/19 20:56, , 9F
我的li是經由drag and drop增加的 我想保持只有一個div
03/19 20:56, 9F
→
03/19 20:57, , 10F
我如果不要用li改用別的標籤 可以達成嗎？
03/19 20:57, 10F
推
03/19 21:05, , 11F
改用別的是可以達成啦，不過會變成並排，不會固定排成兩列
03/19 21:05, 11F
→
03/19 21:07, , 12F
要排成兩列or三列還是要用columns 只是FF跟IE還不支援
03/19 21:07, 12F
→
03/19 21:16, , 13F
謝謝E大提供的想法，我來試試column！
03/19 21:16, 13F
推
03/19 21:25, , 14F
d & d 綁class應該就可以吧 動態新增也可以動態計算阿
03/19 21:25, 14F
→
03/19 21:27, , 15F
F大的計算是指超過一個頁面時 自動分成兩個div這樣嗎？
03/19 21:27, 15F
推
03/19 22:41, , 16F
嗯 然後綁定d & d事件 不過這就是靠js 感覺不聰明XD
03/19 22:41, 16F
→
03/19 22:43, , 17F
嗯嗯 這個方法我用試著用過 可是我的li還要存進mysql
03/19 22:43, 17F
→
03/19 22:43, , 18F
而且是有序的 分多個div處理 可以說是相當的麻煩 ...
03/19 22:43, 18F
推
03/19 22:44, , 19F
多個div用同個class應該不麻煩吧?
03/19 22:44, 19F
→
03/19 23:35, , 20F
因為我的li會動態增加 如果加到第一列時 超出一個頁
03/19 23:35, 20F
→
03/19 23:35, , 21F
我要把全部的li收集回來 在重新切一次div...
03/19 23:35, 21F
→
03/19 23:36, , 22F
最偷懶的方式 就是全部只用一個div 分列看可不可以用css
03/19 23:36, 22F
→
03/19 23:37, , 23F
讓瀏覽器自己去解決XD
03/19 23:37, 23F
推
03/20 02:39, , 24F
印象中你的需求有js
03/20 02:39, 24F
→
03/20 13:22, , 25F
ul 設定寬度就可以了不是嗎?
03/20 13:22, 25F
→
03/20 14:30, , 26F
我的需求有用到js跟php與mysql
03/20 14:30, 26F
→
03/20 14:36, , 27F
我把ul寬度加大時 發現li元素在塞滿一個頁面時 還是不會
03/20 14:36, 27F
→
03/20 14:37, , 28F
換行顯示 會一直往Y軸填充
03/20 14:37, 28F
→
03/20 14:40, , 29F
我這邊的換行是指直書的換行喔...跟寫作文一樣
03/20 14:40, 29F
推
03/20 15:32, , 30F
設定寬度沒用啦 li元素是block元素 一個就佔一整條了
03/20 15:32, 30F
→
03/20 15:55, , 31F
我現在想法是用column然後用js去動態改變style
03/20 15:55, 31F
→
03/20 15:56, , 32F
可是DOM.style的object好像沒有包涵column...
03/20 15:56, 32F
→
03/20 15:56, , 33F
另外一種土法煉鋼就是準備好幾個CSS用JS去換 崩潰...
03/20 15:56, 33F
→
03/20 15:59, , 34F
不要用li元素去包的話 用什麼元素可以達成呢？
03/20 15:59, 34F
推
03/20 16:04, , 35F
不用動態改變吧 在ul親目錄div的css裡面加上column-count:2
03/20 16:04, 35F
→
03/20 16:04, , 36F
就會分成左右兩半部了吧？ 左邊滿了才會去右邊
03/20 16:04, 36F
→
03/20 16:05, , 37F
ff跟webkit要加prefix -moz-跟-webkit-
03/20 16:05, 37F
→
03/20 16:08, , 38F
我的li會一直增加 兩行不一定裝的下 所以需要動態改變
03/20 16:08, 38F
→
03/20 16:09, , 39F
column-count:x x計算得知...很謝謝E大
03/20 16:09, 39F
→
03/20 16:09, , 40F
還有謝謝大家的想法建議！！
03/20 16:09, 40F
‣ 更多 luxgenius 的文章
文章代碼(AID): #1FPn0StJ (Web_Design)