• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

margin input

Aruba Cloud VPS - 50% taniej przez 3 miesiące!
0 głosów
261 wizyt
pytanie zadane 12 lipca 2020 w HTML i CSS przez lujasjeden Użytkownik (860 p.)

Mam 3 inputy i 1 diva chcialbym to rozmiescic tak ze na gorze 2 inputy pod nimi 1 input i na dole div mam tak:

<!DOCTYPE html>
<html lang="pl">
<head>
	<meta charset="utf-8">
	<meta name="description" content="Wypisz sobie ciąg liczb koleś!">
    <meta name="viewport" content="width=device-width, initial-scale=1">
	<link rel="stylesheet" type="text/css"
    href="zadanie2.css">
	
	<script type="text/javascript" src="zadanie2.js"></script>
	
</head>
<body>
	<section class="r1">
		<input type="text" id="pole1" />
		<input type="text"id="pole2"  />
	</section>
	
	<section class="r2">
		<input type="submit" value="pokaz" onclick="wypisz()" />
	</section>
	
	<section class="r3">
		<div id="wynik"></div>
	</section>
	
</body>
</html>
html {
    font-size: 62.5%;
}

body {
	padding: 0;
    margin: 0;
    background-image: linear-gradient(
        30deg,
        moccasin,
        lightblue
    );
    height: 100vh;
    color: red;
    font-family: 'Arial';
    font-weight: bold;
	font-size: 10rem;
}
input {
	height: 100px;
	float: left;
	margin: 2%;
}
div {
	height: 100px;
	float: left;
	margin: 2%;
}

 .r1 input{
	width: 46%;
}

.r2 input {
	width: 96%;
}

.r3 div {
	width: 96%;
}

Ale rozmieszcza mi sie to w ten sposob, ze mam:

input (mniej wiecej na polowe szerokosci przegladarki)

input (mniej wiecej na polowe szerokosci przegladarki)

input (na cala szerokosc (tak jak mialo byc)

div

Ogolnie dziala tak jak bym chcial dla width: 45% no ale przeciez skoro mam margin: 2% to odejmuje 2% od lewej 2% od prawej i 4% ze srodka bo 2 sie lacza 100-2-2-4=92 92/2=46. Dlaczego tak sie dzieje? 

komentarz 12 lipca 2020 przez VBService Ekspert (256,320 p.)

Masz "drobny" błąd:

<input type="text"id="pole2"  />

<input type="text" id="pole2"  />

Jeżeli musisz użyć: input { height: 100px;

input {
    height: 100px;

może lepiej użyć <textarea>

komentarz 12 lipca 2020 przez lujasjeden Użytkownik (860 p.)
ze spacji nie ma po "text"? Zmienilem nic sie nie zmienilo na stronie, caly czas rozmieszcza sie tak jak napisalem
komentarz 12 lipca 2020 przez VBService Ekspert (256,320 p.)
edycja 13 lipca 2020 przez VBService

Nie opisujesz w css zachowania dla kontenera(ów) <section> dla Twoich input'ów zapis

 .r1 input {
   opisuje tag <input> we wnętrzu <section>
}

.r1 {
   opis css dla section o nazwie klasy r1
}

css działa, jest "stosowany" przez przeglądarki kaskadowo, więc dobrze by było zapisać to tak:

.r1 {
   ...
}
 
.r2 {
   ...
}

.r1 input{
    width: 46%;
}
 
.r2 input {
    width: 96%;
}

 

komentarz 12 lipca 2020 przez lujasjeden Użytkownik (860 p.)
no dobra ale jak to z tymi wymiarami, dlaczego miesci mi sie tylko 1 input w wierszu z tak wpisanymi wymiarami?
komentarz 13 lipca 2020 przez VBService Ekspert (256,320 p.)

Wczytaj swoją stronę i uruchom "tryb developerski" F12. Jest tam, takie narzędzie, może pomoże Tobie, "wizualizować" jak "działa" css.

1 odpowiedź

+2 głosów
odpowiedź 13 lipca 2020 przez Comandeer Guru (606,240 p.)
wybrane 13 lipca 2020 przez ScriptyChris
 
Najlepsza

Nie mieszczą się w jednej linii, bo przeglądarka ma domyślne style dla elementów i input mają domyślny padding i border – przez co ostatecznie element ma jakieś 50% + 3-4px.

Przy okazji, polecam przesiąść na border-box, co zdecydowanie ułatwi obliczenia.

1
komentarz 13 lipca 2020 przez lujasjeden Użytkownik (860 p.)
dziekuje borderbox rozwiazal sprawe

Podobne pytania

0 głosów
2 odpowiedzi 581 wizyt
pytanie zadane 8 października 2021 w HTML i CSS przez Rever Początkujący (290 p.)
+2 głosów
2 odpowiedzi 318 wizyt
pytanie zadane 3 lipca 2021 w HTML i CSS przez Doge Gaduła (3,420 p.)
0 głosów
1 odpowiedź 208 wizyt
pytanie zadane 29 stycznia 2020 w HTML i CSS przez Pamix Nowicjusz (160 p.)

93,187 zapytań

142,201 odpowiedzi

322,012 komentarzy

62,514 pasjonatów

Advent of Code 2024

Top 15 użytkowników

  1. 2127p. - dia-Chann
  2. 2092p. - Łukasz Piwowar
  3. 2079p. - Łukasz Eckert
  4. 2037p. - Tomasz Bielak
  5. 2006p. - Michal Drewniak
  6. 2006p. - rucin93
  7. 2005p. - Łukasz Siedlecki
  8. 1964p. - CC PL
  9. 1946p. - Adrian Wieprzkowicz
  10. 1901p. - Mikbac
  11. 1744p. - rafalszastok
  12. 1734p. - Anonim 3619784
  13. 1586p. - Dawid128
  14. 1520p. - Marcin Putra
  15. 1480p. - ssynowiec
Szczegóły i pełne wyniki

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj

Wprowadzenie do ITsec, tom 1 Wprowadzenie do ITsec, tom 2

Można już zamawiać dwa tomy książek o ITsec pt. "Wprowadzenie do bezpieczeństwa IT" - mamy dla Was kod: pasja (użyjcie go w koszyku), dzięki któremu uzyskamy aż 15% zniżki! Dziękujemy ekipie Sekuraka za fajny rabat dla naszej Społeczności!

...