IT rekvalifikace s garancí práce. Seniorní programátoři vydělávají až 160 000 Kč/měsíc a rekvalifikace je prvním krokem. Zjisti, jak na to!
Hledáme nové posily do ITnetwork týmu. Podívej se na volné pozice a přidej se do nejagilnější firmy na trhu - Více informací.

Diskuze: margin-left/right: auto; nefunguje na element <ul>

V předchozím kvízu, Online test znalostí HTML a CSS, jsme si ověřili nabyté zkušenosti z kurzu.

Aktivity
Avatar
Richard Závodný
Člen
Avatar
Richard Závodný:13.2.2016 23:08

Zdravím, mám problém.

Mám HTML:

<div class="navigation --horizontal-top">
            <ul class="--left">
                <li class="-navigation_link">Home</li>
                <li class="-navigation_link">About</li>
                <li class="-navigation_link">Features</li>
                <li class="-navigation_link">Pricing</li>
                <li class="-navigation_link">Contacts</li>
            </ul>
            <ul class="--middle">
                <li class="-navigation_brand">CherryProject</li>
            </ul>
            <ul class="--right">
                <li class="-navigation_link">Sign In</li>
                <li class="-navigation_link">Sign Up</li>
            </ul>
        </div>

A CSS:

div.navigation {

            &.--horizontal-top {
                width: 100%;
                height: 50px;
                margin-bottom: auto;
                background-color: @cherryproject_brand;

                ul {
                    width: auto;
                    height: 50px;
                    display: inline-block;

                    li.-navigation_brand {
                        width: auto;
                        height: 50px;
                        padding-left: 8px;
                        padding-right: 8px;
                        list-style-type: none;
                        line-height: 50px;
                        text-align: center;
                        cursor: pointer;
                        color: #FFFFFF;
                        font-size: 1.075em;
                        float: left;
                    }
                    li.-navigation_link {
                        width: auto;
                        height: 50px;
                        padding-left: 8px;
                        padding-right: 8px;
                        list-style-type: none;
                        line-height: 50px;
                        text-align: center;
                        cursor: pointer;
                        color: #FFFFFF;
                        font-size: 1.075em;
                        float: left;

                        &:hover {
                            background-color: @cherryproject_brand-hover;
                        }
                        &.--active {
                            background-color: @cherryproject_brand-hover;
                        }
                    }
                    li.-navigation_collapse-button {
                        width: 50px;
                        height: 50px;
                        padding-left: 8px;
                        padding-right: 8px;
                        list-style-type: none;
                        line-height: 50px;
                        text-align: center;
                        cursor: pointer;
                        color: #FFFFFF;
                        font-size: 1.075em;
                        float: left;

                        display: none;

                        &:hover {
                            background-color: @cherryproject_brand-hover;
                        }
                        &.--active {
                            background-color: @cherryproject_brand-hover;
                        }
                    }

                    &.--left {
                        margin-right: auto
                    }
                    &.--middle {
                        margin-left: auto;
                        margin-right: auto;
                    }
                    &.--right {
                        margin-left: auto;
                    }

                }

            }

        }

Potřebuju zarovnat <ul> element (podle třídy) pomocí margin-left: auto; nebo margin-right: auto;. Bohužel toto mi jaksi nefunguje. Nevíte v čem bude problém?

Díky moc. :)

 
Odpovědět
13.2.2016 23:08
Avatar
Martin Štěpánek
Tvůrce
Avatar
Martin Štěpánek :14.2.2016 22:12

Jestli se snažíš o to, aby se to zarovnalo na střed použij text-align: center; popřípadě to obal divem, kterému nastavíš ten margin :-)

Nahoru Odpovědět
14.2.2016 22:12
Všechno jde naprogramovat, chce to jen čas a chuť...
Avatar
Richard Závodný
Člen
Avatar
Odpovídá na Martin Štěpánek
Richard Závodný:14.2.2016 22:56

No, to už jsem psal na DJPW.cz že to tím <div>em obalovat nechci, protože chci ať to je alespoň trošku přívětivý a přehledný. :) Ale co už no. Nic jiného mi asi nezbyde. :(

 
Nahoru Odpovědět
14.2.2016 22:56
Avatar
Honza Bittner
Tvůrce
Avatar
Odpovídá na Richard Závodný
Honza Bittner:22.2.2016 22:12

Parádně naprasený kód s nepochopeným a špatně používaným BEM. :-`

Margin auto funguje pouze při nastavení šířky na pevnou či proměnlivou hodnotu, což nikde nemáš.

Nahoru Odpovědět
22.2.2016 22:12
FIT ČVUT alumnus :-) Sleduj mě na https://twitter.com/tenhobi a ptej se na cokoli na https://github.com/tenhobi/ama.
Avatar
Tomáš123
Člen
Avatar
Odpovídá na Honza Bittner
Tomáš123:23.2.2016 15:55

Margin auto hlavne nefunguje pri displayi inline-block (https://www.w3.org/…visudet.html#…); s nastavením šírky to nemá nič spoločné – dôvod https://www.w3.org/…visuren.html#….

Nahoru Odpovědět
23.2.2016 15:55
Keby nebolo Internetu Exploreru, nebolo by dnešného internetu.
Avatar
Richard Závodný
Člen
Avatar
Odpovídá na Honza Bittner
Richard Závodný:23.2.2016 16:05

Honza Bittner
Naprasený? Špatně pochopený a špatně napsaný BEM? Co ti na tom přijde naprasené?

Taky nevím kdo označil tvůj příspěvek za "Akceptované řešení"? Tuším že ty? ;)

"Margin auto funguje pouze při nastavení šířky na pevnou či proměnlivou hodnotu, což nikde nemáš."
Můžeš mi ukázat kde v kódu není?

ul {
        width: auto;
        .
        .
        .
}

Tomáš123
Díky. ;)

Editováno 23.2.2016 16:06
 
Nahoru Odpovědět
23.2.2016 16:05
Avatar
Honza Bittner
Tvůrce
Avatar
Odpovídá na Richard Závodný
Honza Bittner:23.2.2016 17:02

BEM se využívá stylem:

block
block--modifier

block__element
block__element--modifier

Tzn. tvůj první seznam by měl mít třídu

navigation__left

případně něco jako

navigation__column navigation__column--left

Samozřejmě, promiň, koukal jsem špatně. Chvíli před tím jsem koukal na jeden problém, kde měl jen jedne element na centrování a nějak jsem si to spojil.

Buď tedy můžeš využít text-align, což ti zarovná všechny inline(-block) prvky do středu, nebo využij flexbox, který má o dost více následných možností úprav. :-)

Nahoru Odpovědět
23.2.2016 17:02
FIT ČVUT alumnus :-) Sleduj mě na https://twitter.com/tenhobi a ptej se na cokoli na https://github.com/tenhobi/ama.
Avatar
Richard Závodný
Člen
Avatar
Odpovídá na Honza Bittner
Richard Závodný:23.2.2016 17:31

No, jelikož používám LESS (což jsem jaksi zapoměl zminit, za což se omlouvám i když to lze zjistit i z toho kódu. ;)), tak mi to vnořování elementů do sebe hodně ulechčuje práci ať už zkráceným zápisem, tak přehledností v samotném *.less souboru. :)

To, že používám tento styl BEM (který mi vyhovuje), je čistě moje věc pokud se nemýlím.:

block
-element
--modifier

Jinak díky za (i když ne úplně pozitivní) odpověď. :D

 
Nahoru Odpovědět
23.2.2016 17:31
Avatar
Honza Bittner
Tvůrce
Avatar
Odpovídá na Richard Závodný
Honza Bittner:24.2.2016 22:32

Za BEM bych to tedy neoznačoval, je to nějaká šílená splácanina, která nemá hlavu a patu. :(

Kdybys pracoval na velkém projektu tak pochopíš. Hodně rychle jsem se naučil psát věci pořádně. :-)

Nahoru Odpovědět
24.2.2016 22:32
FIT ČVUT alumnus :-) Sleduj mě na https://twitter.com/tenhobi a ptej se na cokoli na https://github.com/tenhobi/ama.
Děláme co je v našich silách, aby byly zdejší diskuze co nejkvalitnější. Proto do nich také mohou přispívat pouze registrovaní členové. Pro zapojení do diskuze se přihlas. Pokud ještě nemáš účet, zaregistruj se, je to zdarma.

Zobrazeno 9 zpráv z 9.