Autor Zpráva
richardzavodny
Profil
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 za pomoc, Richard. :)
Tomáš123
Profil
richardzavodny:
Inline-block nejde centrovať marginom.
richardzavodny
Profil
Tomáš123:
Předtím tam byl float: left a taky mi to nešlo. :/
Tomáš123
Profil
richardzavodny:
Obtekaný prvok sa snaží odplávať čo najviac do zvolenej strany. Aj v tomto prípade sa hodnota auto vlastnosti margin prepočíta.
richardzavodny
Profil
Tomáš123:
Tak jakým způsobem toho docílit?
Bubák
Profil
richardzavodny:
Předtím tam byl float: left a taky mi to nešlo.
Doleva a doprava by to mělo jít, ale floatem nevycentruješ.

Pravděpodobně nejschůdnější bude místo display: inline-block; použít display: table;
Další možnost je deklarovat elementu s display: inline-block; použít text-align: center;
v nadřazeném bloku <div class="navigation --horizontal-top">.
richardzavodny
Profil
Bubák:
„Předtím tam byl float: left a taky mi to nešlo.“
Doleva a doprava by to mělo jít, ale floatem nevycentruješ.
Ano, doleva, doprava to šlo, bohužel ten jeden element potřebuju vycentrovat. :(

Pravděpodobně nejschůdnější bude místo display: inline-block; použít display: table;
display: table; pomohl pouze z poloviny. margin tam půjde, ale elementy mají 100% šířky a řadí se tím pádem pod sebe. width: auto; na to jaksi neplatí. :(

Další možnost je deklarovat elementu s display: inline-block; použít text-align: center;
v nadřazeném bloku <div class="navigation --horizontal-top">.
Toto mi bohužel taky nefunguje. :(

Nevím proč, ale position: absolute; left: auto; right: auto; to také nevycentruje.

Já bych to mohl vyřešit obalovacím <div>em, ale snažím se o přívětivost a relativně rychlý zápis. :) Už teď tam těch elementů je tři ******. :D

Díky za odpověď. :)
Tomáš123
Profil
richardzavodny:
Chceš to takto: ukážka?

V tej syntaxi sa nevyznám. Povedal by som, že ekvivalentný zápis toho centrovania je takýto:
div.navigation {
            
            &.--horizontal-top {
                width: 100%;
                height: 50px;
                margin-bottom: auto;
                background-color: @cherryproject_brand;
                text-align: center;
                
                ul {
                    width: auto;
                    height: 50px;
                    display: inline-block;
                    text-align: left;
                    
                    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;
                        }
                    }                    
                }      
            }     
        }
Tomáš123
Profil
richardzavodny:
Ten zápis nebol ekvivalentný. Ty tam ešte floatuješ. Pripravil som tri ukážky:
Ukážka 1 – rozpadá sa pri väčšom počte položiek, ale všetko je relatívne dobre čitateľné;
Ukážka 2 – ešte viac sa rozpadá pri väčšom počte položiek;
Ukážka 3 – šírka každého stĺpca sa dopočíta podľa šírky vnútorného obsahu. Celé je to rozpadnuté, ale s nastavením minimálnych a maximálnach šírkových rozmerov by to vedelo byť celkom funkčné.

Ak tá tabuľka nevyhovuje, neviem, či existuje riešenie, ktoré by zvládlo to, čo požaduješ; margin: auto s inline-block prvkami nefunguje; pri bloku by fungoval, ale iba so špecifikovanou šírkou; pri floate takisto nič.

Asi ostáva už len nastaviť šírku jednotlivým stĺpcom.
richardzavodny
Profil
Tomáš123:
Dobrá, díky tobě i Bubákovi, já už se s tím nějak poperu. :)

Vaše odpověď

Mohlo by se hodit


Prosím používejte diakritiku a interpunkci.

Ochrana proti spamu. Napište prosím číslo dvě-sta čtyřicet-sedm: