margin input

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 (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ź

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.