Ustawienie szerokości elementów inline

Question

Można ustawić szerokość elementów inline jak <span>, <em> i <strong>, ale nie zauważysz żadnego skutku, dopóki ich położenia.

a) Myślałem, że nie można ustawić szerokości wbudowanego elementu liniowego?

b) Zakładając, że szerokość może być ustawiona - nie zauważymy żadnych efektów (stąd określona szerokość), dopóki nie ustawimy elementu liniowego. Ustawić jak/gdzie?

c) Dlaczego szerokość wbudowanych elementów jest widoczna tylko wtedy, gdy je "ustawimy"?

Answer 1

Jak już wspomniano, ustawienie szerokości (lub innej właściwości związanej z położeniem) elementu śródliniowego spowoduje, że przeglądarka wyświetli element jako element blokowy.

Możesz jawnie zadeklarować tego rodzaju zachowanie za pomocą właściwości CSS display. Najczęstsze ustawienia to display: inline (domyślnie), display: block i display: none.
Pełne odniesienie do właściwości display jest dostępne here.

Jednakże, należy zauważyć, że HTML 4.01 specification zniechęca do wykorzystania „przesłanianie konwencjonalnych interpretacji elementy HTML”:

Arkusze stylów zapewnienie środków określić renderowania arbitralne elementów, w tym, czy element jest renderowany jako blok lub wbudowany. W niektórych przypadkach, takich jak styl wbudowany dla elementów listy, może to być właściwe, ale ogólnie rzecz biorąc, autorzy są zniechęceni do przesłanianie konwencjonalnych interpretację elementów HTML w ten sposób.

Answer 2

a) szerokość elementu liniowego jest ignorowany

b, c) Po "pozycja" element inline (zakładam że oznacza używanie position: absolute), w rzeczywistości, zarówno blok Element, którego szerokość jest interpretowany przez przeglądarkę

Answer 3

myślę, że to ze względu na fakt, że po określeniu atrybutów pozycja dla „inline” element, element nie jest już wyświetlany inline a zamiast tego jest traktowany jako element blokowy.

Answer 4

Oznacza to, że jeśli zastosujesz position: absolute do wstawianego elementu, stanie się on elementem bloku i szerokością wzmocnienia.

Answer 5

Istnieje również możliwość display: inline-block, co może dać Ci najlepsze z obu światów. Uważaj jednak na zgodność z różnymi przeglądarkami.

Answer 6

a. Szerokość elementów śródliniowych jest ignorowana.

b.W rzeczywistości można zastosować szerokość do elementu, jeśli ustawiono display: inline-block;, ale aby zobaczyć wyniki, należy również zastosować overflow: hidden;.

Aby mieć wszystkie zalety inline i blokowych typu można używać follow fragment:

display: inline-block; width: 50%; // or px, em, etc. overflow: hidden; text-overflow: ellipsis;

W tym przypadku można zarządzać szerokość i mają funkcję wielokropka tekstu.

Answer 7

Element śródliniowy nie może mieć szerokości. Szerokość jest właściwością elementu blokowego. Tak więc, aby użyć własności width nad elementem śródliniowym lub elementem z wyświetlanym wierszem typu wyświetlacza, należy go wstawić jako blok inline, np .: display: inline-block;