Na vaši otázku odpovím co nejmenší změnou kódu.

Existují i ​​jiné dobré odpovědi, které nabízejí návrhy na používání flex-boxů, ale měli byste vědět, proč tento HTML nefunguje.

Pokud umístíte sám o sobě - ​​to znamená, že již není vnořen uvnitř kontejneru, ale jako jediný prvek v kontejneru - uvidíte, že tlačítka pro přihlášení a přihlášení jsou stále na různých řádcích.

Problém nesouvisí s

jiný

HTML nebo CSS, které jste napsali.

Důvodem není to, že sedí na stejné lince, protože dvě tlačítka jsou zabalena uvnitř s. jsou

blokové prvky

- budou vždy využívat celou šířku svého rodiče; vždy také začínají na nové lince.

Nějak už ale umisťujete blokové prvky vedle sebe. Používáte

`float: left '

CSS vlastnost na vašem obrázku a a nav. "float" umožňuje umisťovat krabice vedle sebe úpravou jejich šířky a umístění. Budou zabírat zadanou šířku, šířku svých dětí nebo zbývající šířku svého rodiče, pokud není nic napravo, v tomto pořadí (vyzkoušejte to).

Vaše tlačítka jsou uvnitř zabalena s, ale nemají floatovou vlastnost.

Toto je perfektní případ použití

flexbox

.

Nastavte si kontejner

flex-direction

na

řádek

. Pak vložte spacer s

ohnutí

nastaven na

auto

:

CSS:

1. #container {display: flex; flex-direction: row; width: 100%;} # spacer {flex: 1;}

HTML:

1. link 1 link 2 link 3 odkaz 4

Příklad mezerníku Flexbox

Technicky můžete totéž dělat s plaváky, ale já dávám přednost

model flexboxu

pro tento typ rozvržení.

Kromě odpovědi Calvina Huanga, kromě použití flex boxů, které jsou obecně mým nejoblíbenějším a nejpraktičtějším způsobem zarovnání do budoucna, můžete také použít buď inline blokové polohování nebo polohování stolu. V obou případech

Hlavním bodem je, že prvky, které mají být zarovnány, by měly sdílet stejnou strukturu, buď jako buňky tabulky nebo vložené bloky. Odtud může být vertikální zarovnání buď nahoře, na střed, na základní linii, dole nebo na něco více přizpůsobeného.

To je otázka od

Webový design

:

Zkopírujte a vložte následující kód:

HTML kód:

Kód CSS:

ul li {

styl seznamu: žádný;

plavat vlevo;

levý okraj: 10px;

kurzor: ukazatel;

textové dekorace: žádné;

}

V kódu CSS můžete také použít 'display: inline-block;' zaměnitelně získat požadovaný výsledek.

Doufám, že odpověď na vaši otázku.

V zarovnání HTML se označuje jako

plovák

vlastnictví.

Například, pokud máte seznam ovoce:

• Jablko
• Banán
• Granátové jablko

K tomu byste použili následující styl

ul

štítek:

ul

{

plavat vlevo; // toto zarovná vaše texty ve vodorovném směru

výška: 40px; // nastavuje výšku

ul

blok s hodnotou 40 pixelů

}

li

{

šířka: 200px; // nastavuje šířku

li

prvky vodorovně od sebe vzdáleny 200 pixelů.

}

To je nejlepší způsob, jak zarovnat libovolný text vodorovně.

Snad to pomůže!

Na zdraví! :)

Zde je kód:

1. Místní Národní Proč my Umístit reklamu Typy reklam Kontaktujte nás Přihlásit se Přihlásit se

A tady je kód, který se zobrazuje v prohlížeči:

** Problém je opět třetí prvek na pravé straně obrazovky, potřebuji, aby byl vodorovně v souladu s logem a panelem nabídek, a také aby nebyl zkosený tak, jak je. Děkuji za pomoc!

Zarovnání více objektů

Vodorovně nebo svisle

,Můžeš použít

CSS flex-box.

flex-box

je

CSS3

model webového rozložení. Použitím

flex-box

v kterémkoli kontejneru můžete nastavit, aby tento kontejner odpovídal na jakoukoli velikost.

Zde je příklad použití obrázku: -

VÝSTUP:-

Můžete jasně vidět, že tyto tři obrázky jsou stejně zarovnány. Pokud chcete prvky zarovnat svisle, můžete je použít

flex-direction: sloupec

namísto

flex-direction: row.

Dík.