CSS - usuwanie przestrzeni poziomej z menu list za pomocą wyświetlacza: właściwość wbudowana

Jestem nowy w CSS i mam ustalony cel nauki & publikowanie mojej witryny w CSS do końca miesiąca.CSS - usuwanie przestrzeni poziomej z menu list za pomocą wyświetlacza: właściwość wbudowana

Moje pytanie:

Próbuję zbudować CSS poziome menu z upadków aktywowanych kropli, jednak kiedy używam nieruchomość li (lista) przedmioty display: inline, mam przestrzenie pomiędzy poziome (lista li) elementy w pasku. Jak usunąć to miejsce?

Oto HTML:

<div id="tabas_menu"> 
    <ul> 
     <li id="tabBut0" class="tabBut">Overview</li> 
     <li id="tabBut1" class="tabBut">Collar</li> 
     <li id="tabBut2" class="tabBut">Sleeves</li> 
     <li id="tabBut3" class="tabBut">Body</li> 
    </ul> 
</div>

A oto CSS:

#tabas_menu { 
    position: absolute; 
    background: rgb(123,345,567); 
    top: 110px; 
    left: 200px; 
} 

ul#tabas_menu { 
    padding: 0; 
    margin: 0; 
} 

.tabBut { 
    display: inline; 
    white-space: 
    list-style: none; 
    background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgba(255,142,190,1)),to(rgba(188,22,93,1))); 
    background: -moz-linear-gradient(top, rgba(255,142,190,1), rgba(188,22,93,1)); 
    font-family: helvetica, calibri, sans-serif; 
    font-size: 16px; 
    font-weight: bold; 
    line-height: 20px; 
    text-shadow: 1px 1px 1px rgba(99,99,99,0.5); 
    -moz-border-radius: 0.3em; 
    -moz-box-shadow: 0px 0px 2px rgba(0,0,0,0.5); 
    -webkit-border-radius: 0.3em; 
    -webkit-box-shadow: 0px 0px 2px rgba(0,0,0,0.5); 
    padding: 6px 18px; 
    border: 1px solid rgba(0,0,0,0.4); 
    margin: 0; 
}

mogę uzyskać przestrzeń usunięte za pomocą właściwości float: left/right ale gryzie mnie, dlaczego nie mogę osiągnąć taki sam efekt, po prostu używając właściwości wyświetlania.

Źródło

2011-01-17 Kayote

Możesz również chcieć zmienić swoje "deklaracje tła" na "obraz-tło". Nie znam twoich dokładnych intencji, ale skrócone parsowanie poprowadzi twoją składnię do nadpisania innych atrybutów tła. Zobacz http://jsfiddle.net/XVXyA/. Porównaj z http://jsfiddle.net/XVXyA/1/. –

Kilka tygodni temu miałem remarkably similar question.

Przestrzenie poziome są całkowicie uzasadnione. Pomiędzy elementami śródliniowymi liczy się spacja. To ma sens, gdy weźmie się pod uwagę następujące style znaczników pod Generic:

<b>Label:</b> <span>content</span>

Czy nie czują się sfrustrowani, jeśli ta zawartość renderowane jak poniżej?

Label: zawartość

Występowanie elementów blokowych w HTML psuje nam do zapominając o roli spacji. Musimy jednak pamiętać, że za każdym razem, gdy używamy elementów wbudowanych (w tym elementów wbudowanych w blok), spacje w znacznikach faktycznie mają znaczenie, ponieważ HTML jest zasadniczo znacznikiem, a nie językiem kodowania.

Istnieje kilka rozwiązań twojego problemu (zakładając, że chcesz zachować białe znaki w kodzie HTML z powodów estetycznych — jeśli to nie jest ważne, po prostu usuń przestrzeń i zrób to), najłatwiejszym z nich jest zastosuj font-size: 0px do kontenera nadrzędnego, a następnie przywróć rozmiar czcionki do font-size: 16px lub cokolwiek innego w każdym z elementów śródliniowych. Powoduje to, że węzły tekstowe między nimi mają rozmiar czcionki równy zeru.

Źródło

2011-01-17 18:00:17

Dzięki Steven. Podoba mi się sztuczka wielkości czcionki. Będzie się z tym bawić. Pozdrawiam za pomoc. – Kayote

Rozmiar czcionki jest dobry. I jest wiele okazji, w których na pewno nie chcesz przestrzeni. Na przykład. graniczy z przyciskami menu, które powinny znajdować się obok siebie. –

Dzięki za przydatną sztuczkę z rozmiarem czcionki: 0! – Heihachi

Problem polega na tym, że niektóre przeglądarki renderują biały obszar między elementami listy. Na przykład:

<li>item 1</li> 
<li>item 2</li>

Jest nowej linii (i prawdopodobnie niektóre zakładki) po </li> w pierwszej linii, a przed <li> w następnym wierszu. Niektóre przeglądarki internetowe renderują to jako spację. Istnieją dwa sposoby obejścia tego problemu.

Jednym z nich jest, aby usunąć wszystkie te przestrzenie, tak jak poniżej:

<ul> 
    <li id="tabBut0" class="tabBut">Overview</li><li id="tabBut1" class="tabBut">Collar</li><li id="tabBut2" class="tabBut">Sleeves</li><li id="tabBut3" class="tabBut">Body</li> 
</ul>

Jest to rodzaj brzydki rozwiązanie, ale działa.

Inną możliwością jest to, o czym wspomniałeś - użyj float: left. Osobiście zawsze korzystam z rozwiązania float.

Źródło

2011-01-17 17:57:50

Zastosowanie kompilacji float:left komplikuje obliczanie układu dla przeglądarek. Jeśli zależy Ci na prędkości renderowania i wydajności, usuń wszystkie spacje między elementami <li>.

Źródło

2012-03-05 08:22:21 anon

<html> 
<head> 
<style> 
ul li, ul li:before,ul li:after{display:inline; content:' '; } 
</style> 
</head> 
<body> 
<ul><li>one</li><li>two</li><li>three</li></ul> 
<ul> 
    <li>one</li> 
    <li>tw`enter code here`o</li> 
    <li>three</li> 
</ul> 
</body> 
</html>

Źródło

2013-01-30 06:30:41 user2024227

CSS - usuwanie przestrzeni poziomej z menu list za pomocą wyświetlacza: właściwość wbudowana

Odpowiedz

Powiązane problemy