Używam <span>tagów w tytułach moich modułów, np
<span>Categories</span>.
Określam kolor / obraz tła przęsła, szerokość i wysokość w css.
Ale szerokość przęsła zależy od jego zawartości / tekstu.
Więc jeśli to zrobię <span></span>, tylko z obrazem / kolorem tła w css, nic się nie pojawi.
Oczywiście chcę, żeby coś się pojawiło.
Jak mogę to rozwiązać?
Odpowiedzi:
Możesz jawnie ustawić właściwość display na „block”, aby zachowywała się jak element na poziomie bloku, ale w takim przypadku prawdopodobnie powinieneś po prostu użyć zamiast tego elementu div.
<span style="display:block; background-color:red; width:100px;"></span>
inline-blockzamiastblock
spans jest domyślnie stylem wbudowanym, którego szerokości nie można określić.
display: inline-block;
byłby to dobry sposób, chyba że IE go nie obsługuje
możesz jednak zhakować rozwiązanie obsługujące wiele przeglądarek
Nie można określić szerokości elementu z wbudowanym wyświetlaczem. Możesz umieścić w nim coś, na przykład nierozdzielającą spację (), a następnie ustawić dopełnienie, aby nadać mu większą szerokość, ale nie możesz tego bezpośrednio kontrolować.
Możesz użyć display inline-block, ale nie jest to szeroko obsługiwane.
Prawdziwym hackem byłoby umieszczenie obrazu w środku, a następnie ustawienie jego szerokości. Coś w rodzaju przezroczystego 1 piksela GIF. Nie jest to jednak zalecane podejście.
Użyłbym paddingatrybutu. Umożliwi to dodanie określonej liczby pikseli po obu stronach elementu bez utraty właściwości rozpiętości elementu:
Ta metoda spowoduje jednak tylko dodanie dopełnienia, więc jeśli zmienisz długość treści (na przykład z kategorii na tagi), rozmiar treści się zmieni, a także zmieni się ogólny rozmiar elementu. Ale jeśli naprawdę chcesz ustawić sztywny rozmiar, powinieneś zrobić jak wspomniano powyżej i użyć div.
Zobacz model pudełka, aby uzyskać więcej informacji na temat modelu pudełka, zawartości, dopełnienia, marginesów itp.
Podobnie jak w innych odpowiedziach, zacznij atrybuty zakresu od tego:
display:inline-block;
Teraz możesz użyć dopełnienia większego niż szerokość:
padding-left:6%;
padding-right:6%;
Kiedy używasz dopełnienia, twój kolor rozszerza się w obie strony (prawą i lewą), a nie tylko w prawo (jak w przypadku szerokości).
Po ustaleniu wysokości i szerokości powinieneś powiedzieć, jak zachować się, jeśli tekst w środku wykroczy poza swój obszar. Więc dodaj css
przepełnienie: auto;