Ułożenie inputów w divie

Ułożenie inputów w divie
Mostek87
  • Rejestracja:prawie 12 lat
  • Ostatnio:około 2 lata
  • Postów:228
0

Czy ktoś byłby w stanie wyjaśnić mi dlaczeg inputy umieszczone w divie wyłażą z niego w jakiś dziwny sposób? Zgodnie z obliczeniami powinny zmieścić się w środku a tymczasem wyłazi na zewnątrz. Jestem niezmiernie ciekaw dlaczego tak się dzieje.
Kod:

Kopiuj
<div style="display:inline-block; width: 300px; height:30px; border:1px solid black;">
	   <form style="margin:0; padding:0; width:298px;">
	        <input type="submit" value="" style="width:29px; height:28px; border:1px solid red; margin:0; padding:0;">
			<input type="search" value="" style="width:269px; height:28px; border:1px solid green; margin:0; padding:0;">
		 </form>
	   </div>
edytowany 2x, ostatnio: aurel
czysteskarpety
czysteskarpety
  • Rejestracja:prawie 10 lat
  • Ostatnio:ponad 4 lata
  • Lokalizacja:Piwnica
  • Postów:7697
1

aj ziomek, jak ma wyglądać jak div jest mniejszy od inputów, a przy margin padding nie masz "px" nie wspominając że mają zerową wartość...

tutaj masz customowy search box:
http://shipow.github.io/searchbox/
i nie wpisuj styli do html tylko w oddzielnym pliku css dude;


edytowany 1x, ostatnio: czysteskarpety
aurel
Jak wartość wynosi 0, to nie musimy pisać, że px, bo 0 we wszystkich jednostkach wynosi tyle samo...
czysteskarpety
czysteskarpety
@aurel: a ja wyrobiłem sobie taki nawyk, bo ogólnie lepiej wpisać niż nie wpisać, szczególnie na początku zabawy z css
aurel
Nawyki to sobie miej jakie chcesz, ale nie pisz tego tak, jakby to był błąd, bo to nie jest błąd.
czysteskarpety
czysteskarpety
@aurel: faktycznie może źle to ująłem w sensie wypowiedzi, co moi "fani" muszą skrzętnie wykorzystać ;)
Marooned
U nas w projekcie TSLint jest tak skonfigurowany, że wyrzuca warning, jak 0 ma jednostkę.
Mostek87
  • Rejestracja:prawie 12 lat
  • Ostatnio:około 2 lata
  • Postów:228
0

Najwyraźniej zapomniałem napisać, że ustawiłem box-sizing: border-box.
Jeżeli wziąć to pod uwagę no to 300 > 29 + 269 przecież i tak samo 30 > 28. Dlatego nie czaję co jest grane.

Poza tym wydaje mi się dziwne pisanie 0px. Tak na chłopski rozum jeżeli będzie 0px to czy to się czymkolwiek różni od np. 0% ? Ustawiłem to tak na wszelki wypadek.

A style wewnątrz html'a wstawiłem tak na szybkiego w celach badawczo-treningowo, demonstracyjnych.

AN
  • Rejestracja:prawie 11 lat
  • Ostatnio:około 5 godzin
  • Postów:973
0

W ten sposób działają elementy z inline-block

Zwykle, gdy używasz elementy z inline-block, często używasz ich wewnątrz akapitu, więc odstęp pomiędzy literami musi być zachowany.inline-block również stosuje się do tej zasady.

Widzę więc 3 rozwiązania:

  • Usuń spację pomiędzy input i nie będziesz miał dodatkowych pixeli więc będą w jednej linii (zmieszczą się).
  • użyj font-size z wartością 0
  • użyj float zamiast inline-block

Zdalna praca dla Senior Python Developerów --> PW
0

Nie wiem z czym masz problem, tak jak kolega napisał wyżej, wywal wysokość dla div-a (elementy w formie mają prawie 60px) i będzie ok.

AN
  • Rejestracja:prawie 11 lat
  • Ostatnio:około 5 godzin
  • Postów:973
0

Wysokość nie ma tu nic do rzeczy.


Zdalna praca dla Senior Python Developerów --> PW
0

Odniosłem się do odpowiedzi kolegi "Czyste skarpety".
Wysokość ma jak najbardziej znaczenie, div ma 30px, elementy w środku mają prawie 60px, dlatego wychodzą poza główny kontener.

0

Faktycznie, źle zrozumiałem intencje autora.
Do autora wątku, tutaj masz gotowy kod, tylko pozamykaj to klasy.
Jeśli zdecydowałbyś się jednak przejść na float-y, pamiętaj o czyszczeniu oblewania, żeby elementy nie zaczęły Ci dziwnie pływać.

Kopiuj
<div style="width:303px; border:1px solid black;">
   <form style="padding:0px; margin:0px;">
		   <div style="display:inline-block; vertical-align:top;">
				<input type="submit" value="" style="width:29px; height:28px; border:1px solid red; ">
		   </div>
		   <div style="display:inline-block; vertical-align:top;">
				<input type="search" value="" style="width:269px; height:28px; border:1px solid green;">
		   </div>
	 </form>
</div>
Mostek87
  • Rejestracja:prawie 12 lat
  • Ostatnio:około 2 lata
  • Postów:228
0

Cholera jasna, ale leszcz ze mnie zapomniałem zupełnie o tych spacjach! Jakoś nie mogę się do tego przyzwyczaić, wydaje mi się to jakieś mało intuicyjne. No, ale teraz na pewno zapamiętam. :)

NA
  • Rejestracja:ponad 7 lat
  • Ostatnio:ponad 7 lat
  • Postów:13
0
Kopiuj
<div style="display:inline-block; width: 300px; height:30px; border:1px solid black;">
	   <form style="margin:0; padding:0; width:298px;">
	        <input type="submit" value="" style="width:29px; height:28px; border:1px solid red; margin:0; padding:0;">
			<input type="search" value="" style="width:269px; height:28px; border:1px solid green; margin:0; padding:0;">
		 </form>
	   </div>

Hmm... Mnie zastanawia czemu ustalasz stałą wysokość kontenerowi. Ja bym rozwiązał to tak:

Kopiuj
<style>
* {box-sizing: border-box; margin 0; padding: 0;}
.clear {clear: both;}

.kontener {width: 300px; padding: 1; border-color: black;}
.input1 {width: 29px; border-color: red;}
.input2 {width: 269px; border-color: green;}

.input1, .input2 {height: 28px; float: left;}
.kontener, .input1, .input2 {border: 1px solid;}
</style>

<div class="kontener">
     <input type="sumbit" value="" class="input1">
     <input type="sumbit" value="" class="input2">
     <br class="clear">
</div>
Mostek87
  • Rejestracja:prawie 12 lat
  • Ostatnio:około 2 lata
  • Postów:228
0

Rozważania miały charakter czysto teoretyczny. Chcę po prostu dokładnie wiedzieć co i jak działa. Nie potrzebowałem tego aby wypełnić jakieś konkretne zadanie/projekt. Dziękuję za zainteresowanie tematem.

Kliknij, aby dodać treść...

Pomoc 1.18.8

Typografia

Edytor obsługuje składnie Markdown, w której pojedynczy akcent *kursywa* oraz _kursywa_ to pochylenie. Z kolei podwójny akcent **pogrubienie** oraz __pogrubienie__ to pogrubienie. Dodanie znaczników ~~strike~~ to przekreślenie.

Możesz dodać formatowanie komendami , , oraz .

Ponieważ dekoracja podkreślenia jest przeznaczona na linki, markdown nie zawiera specjalnej składni dla podkreślenia. Dlatego by dodać podkreślenie, użyj <u>underline</u>.

Komendy formatujące reagują na skróty klawiszowe: Ctrl+B, Ctrl+I, Ctrl+U oraz Ctrl+S.

Linki

By dodać link w edytorze użyj komendy lub użyj składni [title](link). URL umieszczony w linku lub nawet URL umieszczony bezpośrednio w tekście będzie aktywny i klikalny.

Jeżeli chcesz, możesz samodzielnie dodać link: <a href="link">title</a>.

Wewnętrzne odnośniki

Możesz umieścić odnośnik do wewnętrznej podstrony, używając następującej składni: [[Delphi/Kompendium]] lub [[Delphi/Kompendium|kliknij, aby przejść do kompendium]]. Odnośniki mogą prowadzić do Forum 4programmers.net lub np. do Kompendium.

Wspomnienia użytkowników

By wspomnieć użytkownika forum, wpisz w formularzu znak @. Zobaczysz okienko samouzupełniające nazwy użytkowników. Samouzupełnienie dobierze odpowiedni format wspomnienia, zależnie od tego czy w nazwie użytkownika znajduje się spacja.

Znaczniki HTML

Dozwolone jest używanie niektórych znaczników HTML: <a>, <b>, <i>, <kbd>, <del>, <strong>, <dfn>, <pre>, <blockquote>, <hr/>, <sub>, <sup> oraz <img/>.

Skróty klawiszowe

Dodaj kombinację klawiszy komendą notacji klawiszy lub skrótem klawiszowym Alt+K.

Reprezentuj kombinacje klawiszowe używając taga <kbd>. Oddziel od siebie klawisze znakiem plus, np <kbd>Alt+Tab</kbd>.

Indeks górny oraz dolny

Przykład: wpisując H<sub>2</sub>O i m<sup>2</sup> otrzymasz: H2O i m2.

Składnia Tex

By precyzyjnie wyrazić działanie matematyczne, użyj składni Tex.

<tex>arcctg(x) = argtan(\frac{1}{x}) = arcsin(\frac{1}{\sqrt{1+x^2}})</tex>

Kod źródłowy

Krótkie fragmenty kodu

Wszelkie jednolinijkowe instrukcje języka programowania powinny być zawarte pomiędzy obróconymi apostrofami: `kod instrukcji` lub ``console.log(`string`);``.

Kod wielolinijkowy

Dodaj fragment kodu komendą . Fragmenty kodu zajmujące całą lub więcej linijek powinny być umieszczone w wielolinijkowym fragmencie kodu. Znaczniki ``` lub ~~~ umożliwiają kolorowanie różnych języków programowania. Możemy nadać nazwę języka programowania używając auto-uzupełnienia, kod został pokolorowany używając konkretnych ustawień kolorowania składni:

```javascript
document.write('Hello World');
```

Możesz zaznaczyć również już wklejony kod w edytorze, i użyć komendy  by zamienić go w kod. Użyj kombinacji Ctrl+`, by dodać fragment kodu bez oznaczników języka.

Tabelki

Dodaj przykładową tabelkę używając komendy . Przykładowa tabelka składa się z dwóch kolumn, nagłówka i jednego wiersza.

Wygeneruj tabelkę na podstawie szablonu. Oddziel komórki separatorem ; lub |, a następnie zaznacz szablonu.

nazwisko;dziedzina;odkrycie
Pitagoras;mathematics;Pythagorean Theorem
Albert Einstein;physics;General Relativity
Marie Curie, Pierre Curie;chemistry;Radium, Polonium

Użyj komendy by zamienić zaznaczony szablon na tabelkę Markdown.

Lista uporządkowana i nieuporządkowana

Możliwe jest tworzenie listy numerowanych oraz wypunktowanych. Wystarczy, że pierwszym znakiem linii będzie * lub - dla listy nieuporządkowanej oraz 1. dla listy uporządkowanej.

Użyj komendy by dodać listę uporządkowaną.

1. Lista numerowana
2. Lista numerowana

Użyj komendy by dodać listę nieuporządkowaną.

* Lista wypunktowana
* Lista wypunktowana
** Lista wypunktowana (drugi poziom)

Składnia Markdown

Edytor obsługuje składnię Markdown, która składa się ze znaków specjalnych. Dostępne komendy, jak formatowanie , dodanie tabelki lub fragmentu kodu są w pewnym sensie świadome otaczającej jej składni, i postarają się unikać uszkodzenia jej.

Dla przykładu, używając tylko dostępnych komend, nie możemy dodać formatowania pogrubienia do kodu wielolinijkowego, albo dodać listy do tabelki - mogłoby to doprowadzić do uszkodzenia składni.

W pewnych odosobnionych przypadkach brak nowej linii przed elementami markdown również mógłby uszkodzić składnie, dlatego edytor dodaje brakujące nowe linie. Dla przykładu, dodanie formatowania pochylenia zaraz po tabelce, mogłoby zostać błędne zinterpretowane, więc edytor doda oddzielającą nową linię pomiędzy tabelką, a pochyleniem.

Skróty klawiszowe

Skróty formatujące, kiedy w edytorze znajduje się pojedynczy kursor, wstawiają sformatowany tekst przykładowy. Jeśli w edytorze znajduje się zaznaczenie (słowo, linijka, paragraf), wtedy zaznaczenie zostaje sformatowane.

  • Ctrl+B - dodaj pogrubienie lub pogrub zaznaczenie
  • Ctrl+I - dodaj pochylenie lub pochyl zaznaczenie
  • Ctrl+U - dodaj podkreślenie lub podkreśl zaznaczenie
  • Ctrl+S - dodaj przekreślenie lub przekreśl zaznaczenie

Notacja Klawiszy

  • Alt+K - dodaj notację klawiszy

Fragment kodu bez oznacznika

  • Alt+C - dodaj pusty fragment kodu

Skróty operujące na kodzie i linijkach:

  • Alt+L - zaznaczenie całej linii
  • Alt+, Alt+ - przeniesienie linijki w której znajduje się kursor w górę/dół.
  • Tab/⌘+] - dodaj wcięcie (wcięcie w prawo)
  • Shit+Tab/⌘+[ - usunięcie wcięcia (wycięcie w lewo)

Dodawanie postów:

  • Ctrl+Enter - dodaj post
  • ⌘+Enter - dodaj post (MacOS)