Dlaczego to nie jest w jednej linii?
<!DOCTYPE html>
<html lang="pl" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>Test</title>
</head>
<body>
<input type="text" name="login" value="123456789" />
<input type="image" src="lupa.png" alt="submit" width="30" height="30">
</body>
</html>
lupa w załączniku.
Dla czytelności.
Odpowiedź jak najbardziej poprawna jeżeli chodzi o kod ale myślę, że chodzi tutaj o wyświetlanie tutaj pola input i lupy w jednej linii :)
Co do tematu to jest sporo odpowiedzi na ten temat. Możesz zrobić to chociażby tak:
<body>
<div style="display: flex;align-items: center;">
<input type="text" name="login" value="123456789" />
<input type="image" src="lupa.png" alt="submit" width="30" height="30"/>
bla bla bla
</div>
</body>
leonpro778 napisał(a):
Odpowiedź jak najbardziej poprawna jeżeli chodzi o kod ale myślę, że chodzi tutaj o wyświetlanie tutaj pola input i lupy w jednej linii :)
My tu jesteśmy od odpowiadania, a nie od myślenia nad tym, co autor miał na myśli. Zamiast dodawać do załączników nic nie wnoszący obrazek lupy, OP mógł zrobić zrzut strony i pokazać o co w ogóle chodzi.
@leonpro778 wielkie dzięki. Kłaniam się uniżenie.
Oczywiście, to to podałem w pytaniu było drastycznym uproszczeniem, tego, co robię. Po prostu, dla przejrzystości, wywaliłem wszystko co zbędne. Dodałem obrazek lupy i myślałem, że oczywiste będzie dla wszystkich, że w jakimś celu go dodałem. Widać nie dla wszystkich. No i oczywiście pytanie było skierowane do tych, którzy wiedzą, co oznacza
display: inline;
No ale wiem, że czasami tak głęboko wchodzi się w temat, że podstawy są już bardzo złożonymi zagadnieniami.
Ale może ktoś by powiedział, dlaczego inline nie jest tu inline? Bo mimo, że mój problem @leonpro778 rozwiązał, to ciekawość została.
Sadam2 napisał(a):
Dodałem obrazek lupy i myślałem, że oczywiste będzie dla wszystkich, że w jakimś celu go dodałem. Widać nie dla wszystkich.
Trochę tym zdaniem możesz obrażać bardziej doświadczonych użytkowników :) Nazwa tematu w stylu "Pole input i obrazek w jednej linii" czy coś podobnego załatwiłby sprawę i niepotrzebna by była ta dyskusja :) To tak na przyszłość.
Sadam2 napisał(a):
Ale może ktoś by powiedział, dlaczego inline nie jest tu inline? Bo mimo, że mój problem @leonpro778 rozwiązał, to ciekawość została.
Jest właśnie inline. Mylisz pojęcia inline z vertical-align.
Zgadzam się z tym, że trzeba dawać jak najwięcej obrazków. Trzeba naprawdę dbać o czytelność przekazu.
W poruszanym problemie zaciekawiła mnie, początkującego, jedna sprawa. Otóż ta ramka z cyferkami ma wysokość 22, jak widać poniżej:
Lupka ma wysokość 30:
Ale nie wysokości tych elementów decydują o ich wzajemnym przesunięciu w pionie:
W takim razie co?
No a czytelny przekaz rzeczywiście jest ważny. Jeśli się go nie stosuje, to dochodzi do takich sytuacji :-) :
Wyznacznikiem jest zwykły tekst bez formatowania w samym html. Zobacz sobie taki kod:
<body>
<div>
<input type="text" name="login" value="123456789" />
<input type="image" src="lupa.png" alt="submit" width="30" height="30"/>
bla bla bla
<span style="font-size: 22px">kolejne bla bla bla</span>
</div>
</body>
W span możesz sobie zwiększać wielkość czcionki do 40px ale podstawa tekstu będzie zaczynała się równo z zwykłym tekstem jak i tekstem w polu input. Tak samo img. Dół obrazka jest równo z podstawą zwykłego tekstu.