| Autor | Zpráva | ||
|---|---|---|---|
| richardzavodny Profil |
#1 · Zasláno: 13. 2. 2016, 22:21:18
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 Profil |
#3 · Zasláno: 13. 2. 2016, 23:16:45
Tomáš123:
Předtím tam byl float: left a taky mi to nešlo. :/
|
||
| Tomáš123 Profil |
#4 · Zasláno: 13. 2. 2016, 23:25:38
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 |
#5 · Zasláno: 13. 2. 2016, 23:45:04
Tomáš123:
Tak jakým způsobem toho docílit? |
||
| Bubák Profil |
#6 · Zasláno: 14. 2. 2016, 02:03:18
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 |
#7 · Zasláno: 14. 2. 2016, 10:56:21
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 |
#8 · Zasláno: 14. 2. 2016, 19:42:48
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 |
#9 · Zasláno: 15. 2. 2016, 14:19:51
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 |
#10 · Zasláno: 15. 2. 2016, 14:46:29
Tomáš123:
Dobrá, díky tobě i Bubákovi, já už se s tím nějak poperu. :) |
||
|
Časová prodleva: 10 let
|
|||
0