Předvánoční Black Friday Předvánoční Black Friday
Až 80% zdarma! Předvánoční BLACK FRIDAY akce. Více informací
Avatar
gold604
Člen
Avatar
gold604:9. července 14:22

Ahojte,
mám dva elementy: input a div, ktoré majú nastavený display na inline-block. Keď na dive nastavím margin-top tak namiesto toho, aby sa posunul ten div, posunie content nad sebou. Keď nastavím obom elementom float tak to funguje.
Našiel by sa tu aj iný spôsob pri ktorom by som nemusel použiť floaty?

Ďakujem.

Jsfiddle

 
Odpovědět 9. července 14:22
Avatar
Ota Vlna
Člen
Avatar
Odpovídá na gold604
Ota Vlna:9. července 15:06

Místo marginu bys mohl divu nastavit relativní pozici a potom ho posunout pomocí vlastnosti "top"

body { margin: 0; }

input, div { display: inline-block; }

div {
  width: 10px;
  height: 10px;
  background: #000;
  position: relative;
  top: 20px;
}
 
Nahoru Odpovědět  +1 9. července 15:06
Avatar
Peter Mlich
Člen
Avatar
Peter Mlich:11. července 15:12

'posunie content nad sebou'
Nedal jsi kod. Lze jen tipovat. Je asi 100 moznosti.
Ano, takhle se obvykle margin chova, vyteka do jinych elementu.

Moznosti pro ten element nebo ten, ve kterem je uzavren:
position:rela­tive/absolute, padding, display:inline-block, border, display:table, table-row, ...

 
Nahoru Odpovědět 11. července 15:12
Avatar
gold604
Člen
Avatar
Odpovídá na Peter Mlich
gold604:11. července 16:12

Peter, keby si sa pozrel poriadne tak by si našiel na konci link na jsfiddle. Paddingy, floaty, display inline-block a position relative som skúšal... Nakoniec mi najviac vyhovoval vertical-align. :)

Akceptované řešení
+5 Zkušeností
Řešení problému
 
Nahoru Odpovědět 11. července 16:12
Avatar
Peter Mlich
Člen
Avatar
Peter Mlich:12. července 8:35

Aj, tak sorry. Maji tu spatny skin na linky, stava se mi to :)

Aha, takze, podle kodu vetsina z toho by ti nepomohla.
Ano, vertical-align by se dal pouzit, ale ma to sva omezeni.
Lepsi mozna position:relative a pouzit pak top. (kod navic si nevsimej)

<div><input type="text"><div></div></div>
<style>
div { position:relative; }
div input, div div { display: inline-block; }
div div {top:20px;}

div div {
  width: 10px;
  height: 10px;
  background: #000;
  margin-top: 20px;
}
</style>
 
Nahoru Odpovědět 12. července 8:35
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 5 zpráv z 5.