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

HTML a CSS HTML a CSS margin-left/right: auto; nefunguje na element <ul> American English version English version

Avatar
Richard Závodný:

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. února 23:08
Avatar
Martin Štěpánek (Enormyk):

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. února 22:12
Nesnáším, když někdo u if nepoužívá {}, byť se jedná o jeden řádek.
Avatar
Odpovídá na Martin Štěpánek (Enormyk)
Richard Závodný:

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  ±0 14. února 22:56
Avatar
Honza Bittner
Redaktor
Avatar
Odpovídá na Richard Závodný
Honza Bittner:

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  +1 22. února 22:12
Ptejte se mě na cokoli na https://github.com/HoBi/ama a followujte mě na Twitteru https://twitter.com/tenhobi. :-)
Avatar
Tomáš123
Člen
Avatar
Odpovídá na Honza Bittner
Tomáš123:

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. února 15:55
Keby nebolo Internetu Exploreru, nebolo by dnešného internetu.
Avatar
Odpovídá na Honza Bittner
Richard Závodný:

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. února 16:06
 
Nahoru Odpovědět 23. února 16:05
Avatar
Honza Bittner
Redaktor
Avatar
Odpovídá na Richard Závodný
Honza Bittner:

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. února 17:02
Ptejte se mě na cokoli na https://github.com/HoBi/ama a followujte mě na Twitteru https://twitter.com/tenhobi. :-)
Avatar
Odpovídá na Honza Bittner
Richard Závodný:

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. února 17:31
Avatar
Honza Bittner
Redaktor
Avatar
Odpovídá na Richard Závodný
Honza Bittner:

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. února 22:32
Ptejte se mě na cokoli na https://github.com/HoBi/ama a followujte mě na Twitteru https://twitter.com/tenhobi. :-)
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.