Float:left height patlıyor

03-04-2021, 19:55:06

ul li yapısı ile float lefti li'ye verince div'in height değeri kaçıyor yardımcı olur musunuz?

<div id="box1">
            <ul id="box2">
                <li>deneme</li>
                <li>deneme</li>
                <li>deneme</li>
                <li>deneme</li>
                <li>deneme</li>
                <li>deneme</li>
            </ul>
        </div>

#box1{
    width: 100%;
    height: auto;
background-color: #000;
}
#box2{
    list-style: none;
    width: 75%;
    margin: auto;
}
#box2 li{
    width: 250px;
    margin: 0;
    float: left;
}

Sonuç:
https://ibb.co/XpRTBNT
https://ibb.co/wdC5BCr

03-04-2021, 20:00:48

#2

Androsoft

display:inline deneyin.

03-04-2021, 20:02:02

#3

weprof

Androsoft adlı üyeden alıntı: mesajı görüntüle

display:inline deneyin.

hocam onuda denedim fakat bu sefer width değerini yok sayıyor

03-04-2021, 20:06:15

#4

Swmwhois

clear both deneyin olmadı min-height deneyin o da olmadı position ve display değerleri verin hem li hem dive liye.

03-04-2021, 20:10:57

#5

weprof

Swmwhois adlı üyeden alıntı: mesajı görüntüle

clear both deneyin olmadı min-height deneyin o da olmadı position ve display değerleri verin hem li hem dive liye.

Androsoft adlı üyeden alıntı: mesajı görüntüle

display:inline deneyin.

display: inline-block ile sorunumu çözüldü teşekkürler ilginiz için.

03-04-2021, 20:11:23

#6

DontTryMe

hocam float yaptığınızda float yapılan item normal sayfa akışından ayrılır. Dolayısıyla divin dışına çıkıyor diyebiliriz. Tam olarak ne yapmak istediğini söylersen daha iyi yardımcı olurum.

03-04-2021, 20:12:59

#7

weprof

DontTryMe adlı üyeden alıntı: mesajı görüntüle

hocam float yaptığınızda float yapılan item normal sayfa akışından ayrılır. Dolayısıyla divin dışına çıkıyor diyebiliriz. Tam olarak ne yapmak istediğini söylersen daha iyi yardımcı olurum.

hocam div yapısından ayrılmadan list öğelerini yan yana belirli bir ebat ile sıralamak için bu kodlamayı yazıyordum. display:inline-block; ile sorunum çözüldü.

03-04-2021, 20:30:15

#8

onurak

#box1 {
    width: 100%;
    height: auto;
    background-color: #000;
    float: left;
}
#box2 {
    list-style: none;
    width: 75%;
    margin: auto;
    float: left;
}
#box2 li {
    margin: 0;
    float: left;
    color: #fff;
    width: 100%;
}

veya

#box2 li {
    width: 250px;
    margin: 0;
    float: left;
    color: #fff;
    clear: both;
}

03-04-2021, 20:33:55

#9

weprof

onurak adlı üyeden alıntı: mesajı görüntüle

#box1 {
    width: 100%;
    height: auto;
    background-color: #000;
    float: left;
}
#box2 {
    list-style: none;
    width: 75%;
    margin: auto;
    float: left;
}
#box2 li {
    margin: 0;
    float: left;
    color: #fff;
    width: 100%;
}

veya

#box2 li {
    width: 250px;
    margin: 0;
    float: left;
    color: #fff;
    clear: both;
}

a

Sağol hocam deneyeceğim ama şu an display:inline:block ile çözdüm