Stylizacja strony: alternatywa dla używania pływaków

Question

Ilekroć chcę umieszczać elementy obok siebie, używam na nich pływaków. jak użycie dwóch div z floatem: pozostawione na nich. Zastanawiam się, czy jest to najlepsza strategia, czy istnieje lepsza alternatywa.

To jest przykładowy kod

<div> 
    <div style="float:left"> 
    <p>Alphabet</p> 
    <select style="width: 200px;"> 
    <option>A</option> 
    <option>B</option> 
    </select> 
    </div> 
     <div style="float:left; margin-left:20px;"> 
     <p>Number</p><input type="text" value="123" /> 
     </div> 
</div> 

Co jeszcze mogę poprawić w powyższym kodzie. Czy to naprawdę konieczne? Czy powinienem użyć jakiegoś innego tagu?

A Live Example

Answer 1

Zastosowanie np style="display:inline-block"

I o drugie pytanie:

<div style="display:inline-block"> 
    <label for="alphabet" style="display:block;">Alphabet</label> 
    <select id="alphabet" style=" width: 200px;"> 
    <option>A</option> 
    <option>B</option> 
    </select> 
</div> 

użyciu label jest bardziej semantyczny i stosowania display:block do niego sprawia, że ​​obejmują całą szerokość.

Staraj się również nie używać inline css.

Answer 2

Alternatywą może być użycie display:inline-block; i użycie etykiet takich jak w przykładzie this.

Etykiety doskonale nadają się do urządzeń o ograniczonych możliwościach wyświetlania, szczególnie ręcznych, ponieważ kliknięcie spowoduje aktywację określonego pola. Powinieneś zawsze ich używać.

W każdym razie nie widzę sensu, aby nie używać pływaków. Jeśli wiesz, jak z nich korzystać poprawnie, są świetne i są kompatybilne we wszystkich przeglądarkach.

Answer 3

Użyj float: left;. Nie ma powodu, aby nie używać go w tej sytuacji.

Jest bardzo dobrze obsługiwany, a "wbudowany blok" będzie źródłem problemów, chyba że zhakujesz go w starszych przeglądarkach. Od tego czasu możesz cały czas używać float: left;.