CSS排版問題

css

豬豬人 2019-07-31 15:36:02 ‧ 1286 瀏覽

分享至

我參考IKEA的選單
https://www.ikea.com/
我的 ul>li:last-child>div:first-child 無法放置在最下面，反而跑到了 ul>li:first-child>div:last-child 的上層我該怎麼調整呢?

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
    article, aside, blockquote, body, caption, dd, details, div, dl, dt, fieldset, figcaption, figure, footer, form, h1, h2, h3, h4, h5, h6, header, hgroup, html, li, main, menu, nav, ol, p, pre, section, table, td, textarea, th, ul {
    margin: 0;
    padding: 0;
}
        ul{
            position:relative;
            list-style-type: none;
        }
        ul>li:first-child{
            width: 33.33%;
            float: left;
        }
        ul>li:last-child{
            width: 33.33%;
            float: right;
        } 
        ul>li:first-child>div:last-child {
            top: 0;
            position: absolute;
            left: 33.33%;
            width: 33.33%;
        }
        ul>li:last-child>div:first-child {
            bottom:0px;
            position: absolute;
            left: 33.33%;
            width: 33.33%;
        }
        .locations__region>ul:after {
            content: " ";
            clear: both;
            display: block;
        }
    </style>
</head>
<body>  
        <ul>
            <li>
                <div>
                    <div><a href="">台灣</a></div>
                    <div><a href="">台灣</a></div>
                    <div><a href="">台灣</a></div>
                    <div><a href="">台灣</a></div>
                    <div><a href="">台灣</a></div>
                    <div><a href="">台灣</a></div>
                    <div><a href="">台灣</a></div>
                    <div><a href="">台灣</a></div>
                    <div><a href="">台灣</a></div>
                    <div><a href="">台灣</a></div>
                </div>
                <div>
                    <div><a href="">台灣</a></div>
                    <div><a href="">台灣</a></div>
                    <div><a href="">台灣</a></div>
                    <div><a href="">台灣</a></div>
                    <div><a href="">台灣</a></div>
                </div>
            </li>
            <li>
                <div>
                    <div><a href="">台灣</a></div>
                    <div><a href="">台灣</a></div>
                    <div><a href="">台灣</a></div>
                    <div><a href="">台灣</a></div>
                    <div><a href="">台灣</a></div>
                </div>
                <div>
                    <div><a href="">台灣</a></div>
                    <div><a href="">台灣</a></div>
                    <div><a href="">台灣</a></div>
                    <div><a href="">台灣</a></div>
                    <div><a href="">台灣</a></div>
                    <div><a href="">台灣</a></div>
                    <div><a href="">台灣</a></div>
                    <div><a href="">台灣</a></div>
                    <div><a href="">台灣</a></div>
                    <div><a href="">台灣</a></div>
                </div>
            </li>
        </ul>

    
</body>
</html>

登入發表討論

直播研討會

{{ item.channelVendor }} {{ item.webinarstarted }} |

直播中

1 個回答

㊣浩瀚星空㊣

iT邦大神 1 級 ‧ 2019-07-31 15:55:49

給你一個建議，不要用 float 來做位置調整。
你都參考IKEA了。為何不也直接拿他們的CSS來用就好了。

用 float 來說調整位置並不是你想像的位置處理。而是排位處理。
當群組一多時就會跑位到不要不要的。

回應 3
分享
檢舉

豬豬人 iT邦新手 4 級 ‧ 2019-07-31 16:10:04 檢舉

但是IKEA有用float排版我也照他的方式下去做，就是ul>li:last-child>div:first-child地方不到位

㊣浩瀚星空㊣ iT邦大神 1 級 ‧ 2019-07-31 16:20:04 檢舉

你看到的是

media (min-width: 48rem)
.locations__region>ul>li:first-child {
    float: left;
}

這類似的RWD做法吧。
它是當窄屏時，才去做float。由於窄屏配合單一float並不會有事。
畢竟不會碰上自動換行切分等問題存在。

它的float是有條件觸發的。並不像你這樣無任何限定條件下使用。
然後還會有多重float觸發處理。你會調位置調到死人的。

froce iT邦大師 1 級 ‧ 2019-07-31 17:14:15 檢舉

float我是建議忘記他的存在...
現在css有很多更好的選擇。

登入發表回應

我要發表回答

立即登入回答

參賽組數

1064 組

團體組數

40 組

累計文章數

22189 篇

完賽人數

600 人

15th鐵人賽 16th鐵人賽 13th鐵人賽 14th鐵人賽 12th鐵人賽 11th鐵人賽鐵人賽 2019鐵人賽 javascript 2018鐵人賽 python 2017鐵人賽 windows php c# windows server linux css react vue.js

IT邦幫忙