Dlaczego to nie jest w jednej linii?

0

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.

2

Dla czytelności.

1

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>
1
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.

0

@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.

1
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.

0

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:
screenshot-20181130112553.png

Lupka ma wysokość 30:
screenshot-20181130112655.png

Ale nie wysokości tych elementów decydują o ich wzajemnym przesunięciu w pionie:
screenshot-20181130112854.png

W takim razie co?

No a czytelny przekaz rzeczywiście jest ważny. Jeśli się go nie stosuje, to dochodzi do takich sytuacji :-) :
screenshot-20181130113105.png

0

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.

1 użytkowników online, w tym zalogowanych: 0, gości: 1, botów: 0