Jak sprawić, by biały układ HTML był nieproporcjonalny?

EDYTOWANIE: Jest prawie takie samo pytanie na Removing whitespace between HTML elements when using line breaks, jednak oprócz sugestii "pływakowej" nie znajduję żadnej z odpowiedzi odpowiadających moim wymaganiom. Chciałbym, aby to pozostało otwarte na bardziej innowacyjne sugestie.Jak sprawić, by biały układ HTML był nieproporcjonalny?

Jeśli masz kolejne inline-block s staje się znacząca. Dodaje pewien poziom przestrzeni między elementami. Jaki jest "poprawny" sposób uniknięcia efektu białych znaków w układzie HTML, jeśli chcesz, aby te bloki wyglądały na wzajemnie ze sobą powiązane?

przykład:

<span>a</span> 
<span>b</span>

Powoduje to, inaczej niż:

<span>a</span><span>b</span>

powodu przestrzeni pomiędzy nimi. Chcę, aby efekt białych znaków zniknął bez uszczerbku dla układu kodu HTML kodu. Chcę, aby moje szablony HTML pozostały czyste i dobrze wcięte.

Myślę, że te opcje są brzydkie:

1) Poprawianie text-indent, margin, padding itd. (Ponieważ byłoby uzależnione od wielkości czcionki, domyślną szerokość white-space itp)

2) Umieszczenie wszystko w jednym wierszu, obok siebie.

3) Zero font-size. Wymagałoby to przesłonięcia rozmiaru czcionki w blokach, które w przeciwnym razie zostałyby odziedziczone.

4) Możliwe rozwiązania dla całego dokumentu. Chcę, aby rozwiązanie pozostało lokalne dla określonego bloku HTML.

Wszelkie pomysły, wszystkie oczywiste punkty, których mi brakuje?

Źródło

2010-04-07 Sedat Kapanoglu

Nie powinieneś używać wersji bez spacji pomiędzy elementami, tylko po to, aby wszystko działało w przestrzeni. Prawdopodobnie będziesz musiał ustawić wbudowane elementy na display:block, aby uzyskać prawidłowy układ.

Spójrz na this similar question of mine, który ma kilka dobrych odpowiedzi.

Edit: Jedną z odpowiedzi na powyższe pytanie sugeruje użycie komentarzy HTML w ostateczności, np .:

<span>a</span><!-- 
--><span>b</span>

Źródło

2010-04-07 21:30:59 Skilldrick

Jak to zrobić za pomocą 'block's bez określania wartości absolutnych i whitespaces? –

Oh, nie mogłem znaleźć innego pytania, dzięki za link. Wygląda na to, że jest to ustalony sposób działania. –

miałem ten sam problem z niedawnym plugin byłem rozwijającego. Ponieważ używałem inline-block, a ponieważ wtyczka wymagała absolutnie zerowej przestrzeni między elementami, a ja nigdy nie wiedziałem, jakie elementy mogą być, musiałem wymyślić rozwiązanie, które nie wymagało interwencji użytkownika.

Oto:

function removeWhiteSpace(raw) { 
    var cleaned_string = raw.replace(/[\r+\n+\t+]\s\s+/g, ""); 
    return cleaned_string; 
}

JavaScript wydaje się być jedynym realnym rozwiązaniem tego problemu. Wyciągam dane HTML za pomocą jQuery, a następnie uruchamiam je za pomocą tej funkcji, aby je wyczyścić.

Źródło

2010-04-07 21:31:15 dclowd9901

Powstrzymałbym się od tego, ponieważ manipulowanie JavaScript DOM jest bardzo drogie (uruchamia aktualizacje DOM, obliczanie układu i malowanie), szczególnie na urządzeniach mobilnych. Float działał dobrze w moim przypadku. –

czy problem jest zbędnych spacji lub wolnostojące/Korzystanie podziały "UL" z odpowiednim CSS może wykonywać swoją pracę/

oczywiście istnieje reset.css/

html:

<ul id="uList"> 
<li><img src="#" alt="img"/></li> 
<li><img src="#" alt="img"/></li> 
<li><img src="#" alt="img"/></li> 
<li><img src="#" alt="img"/></li> 
</ul>

css:

ul#uList, ul#uList li, ul#uList li img{display:block; float:left;}

Źródło

2010-04-08 00:15:24 spielersun

Nie dotyczy to UL ani LI. Właściwie to "float" rozwiązuje problem. (zobacz inne pytanie) –

można również użyć word-spacing:

<!DOCTYPE html> 
<html lang="en"> 
<meta charset="UTF-8"> 
<title>Inline-blocks without whitespace between</title> 
<style> 
html, 
body 
    { 
     background:  #fff; 
     padding:  0; 
     margin:   0; 
    } 
p 
    { 
     background:  #9ab; 
     text-align:  center; 
     margin:   50px; 
     padding:  0 20px; 

     word-spacing: -.3em; 
    } 
span 
    { 
     display:  inline-block; 
     padding:  3px; 
     color:   #def; 
     background:  #678; 
     word-spacing: normal; 
    } 
@media screen and (-webkit-min-device-pixel-ratio:0) 
{ 
    /** 
    * Since WebKit fails on word-spacing for 
    * inline-block … we have to hack. 
    */ 
    span 
     { 
      margin:   0 -.2em; 
     } 
} 
</style> 

<p> 
    <span>Inline-block<br>number 1</span> 
    <span>Inline-block<br>number 2</span> 
    <span>Inline-block<br>number 3</span> 
</p>

Live demo

Źródło

2010-04-08 03:03:06 fuxia

To jest dobre, ale nie wydaje się zbyt różne od określania marginesu/dopełnienia/wcięć. Co oznacza "-.3em"? I co będzie oznaczać, gdy zmienię czcionkę użytą w bloku? –

'.3em' to kosmiczne przeglądarki zwykle zajmujące normalną białą przestrzeń. Możesz użyć bloków wbudowanych w dowolną czcionkę - odstępy między słowami są obliczane z czcionki 'p'. Główna różnica w stosunku do "marginesu" lub "wcięcia tekstowego" jest widoczna, gdy bloki wbudowane kolidują z krawędzią ich elementu nadrzędnego: ujemny margines wypycha je z ramki nadrzędnej. A "dopełnienie" i tak nie może rozwiązać twojego problemu. – fuxia

Jak sprawić, by biały układ HTML był nieproporcjonalny?

Odpowiedz

Powiązane problemy