html - länge - title tags bilder




Wie entferne ich den Abstand zwischen Inline-Block-Elementen? (20)

Alle Techniken zur display:inline-block zur display:inline-block sind fiese Hacks ...

Benutze Flexbox

Es ist genial, löst all dieses Inline-Block-Layout bs und bietet ab 2017 98% Browser-Unterstützung (mehr, wenn Sie sich nicht um alte IEs kümmern).

Angesichts dieser HTML und CSS:

span {
    display:inline-block;
    width:100px;
    background-color:palevioletred;
}
<p>
    <span> Foo </span>
    <span> Bar </span>
</p>

Als Ergebnis wird zwischen den SPAN-Elementen ein vier Pixel breiter Raum sein.

Demo: http://jsfiddle.net/dGHFV/

Ich verstehe, warum das passiert, und ich weiß auch, dass ich diesen Raum loswerden könnte, indem ich den Leerraum zwischen den SPAN-Elementen im HTML-Quellcode entferne:

<p>
    <span> Foo </span><span> Bar </span>
</p>

Ich habe jedoch auf eine CSS-Lösung gehofft, bei der der HTML-Quellcode nicht manipuliert werden muss.

Ich weiß, wie ich das mit JavaScript lösen kann - indem ich die Textknoten aus dem Containerelement (dem Absatz) entferne, so:

// jQuery
$('p').contents().filter(function() { return this.nodeType === 3; }).remove();

Demo: http://jsfiddle.net/dGHFV/1/

Aber kann dieses Problem nur mit CSS gelöst werden?


Benutze flexbox und führe einen Fallback (aus den obigen Vorschlägen) für ältere Browser durch:

ul {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
}

Die CSS-Textmodul-Level-4-Spezifikation definiert eine text-space-collapse Eigenschaft, mit der gesteuert werden kann, wie Leerraum in und um ein Element herum verarbeitet wird.

In Bezug auf dein Beispiel müsstest du das einfach schreiben:

p {
  text-space-collapse: discard;
}

Leider implementiert noch kein Browser diese Eigenschaft (Stand September 2016) wie in den Kommentaren zur Antwort von HBP erwähnt .


Dies ist die gleiche Antwort, die ich auf die verwandten gegeben habe: Anzeige: Inline-Block - Was ist das für ein Raum?

Es gibt tatsächlich eine wirklich einfache Möglichkeit, Leerzeichen aus Inline-Blöcken zu entfernen, die sowohl einfach als auch semantisch sind. Es heißt eine benutzerdefinierte Schriftart mit Leerzeichen mit null Breite, die es ermöglicht, den Leerraum (der vom Browser für Inline-Elemente hinzugefügt wird, wenn sie sich in separaten Zeilen befinden) in der Zeichensatzebene mit einer sehr kleinen Schriftart zu reduzieren. Sobald Sie die Schriftart deklarieren, ändern Sie einfach die font-family auf dem Container und wieder auf den Kindern, und voila. So was:

@font-face{ 
    font-family: 'NoSpace';
    src: url('../Fonts/zerowidthspaces.eot');
    src: url('../Fonts/zerowidthspaces.eot?#iefix') format('embedded-opentype'),
         url('../Fonts/zerowidthspaces.woff') format('woff'),
         url('../Fonts/zerowidthspaces.ttf') format('truetype'),
         url('../Fonts/zerowidthspaces.svg#NoSpace') format('svg');
}

body {
    font-face: 'OpenSans', sans-serif;
}

.inline-container {
    font-face: 'NoSpace';
}

.inline-container > * {
    display: inline-block;
    font-face: 'OpenSans', sans-serif;
}

Anzug nach Geschmack. Hier ist ein Download zu der Schriftart, die ich gerade in Font-Forge erfunden und mit FontSquirrel webfont generator konvertiert habe. Nahm mich alle 5 Minuten. Die css @font-face Deklaration ist enthalten: gezippte Null-Breite-Raumschrift . Es befindet sich in Google Drive, daher müssen Sie auf Datei> Herunterladen klicken, um es auf Ihrem Computer zu speichern. Wahrscheinlich müssen Sie die Schriftartenpfade auch ändern, wenn Sie die Deklaration in Ihre CSS-Hauptdatei kopieren.


Einfach:

item {
  display: inline-block;
  margin-right: -0.25em;
}

Das Elternelement muss nicht berührt werden.

Einzige Bedingung hier: Die Schriftgröße des Artikels darf nicht definiert sein (muss der Schriftgröße der Eltern entsprechen).

0.25em ist der Standard word-spacing

W3Schools - Wortabstand-Eigenschaft


Entfernen Sie die Leerzeichen von Inline-Blockelementen. Es gibt viele Methoden:

  1. Negative Marge

    div a {
        display: inline - block;
        margin - right: -4 px;
    }
    
  2. Schriftgröße auf Null

    nav {
        font - size: 0;
    }
    nav a {
        font - size: 16 px;
    }
    
  3. Überspringen Sie das schließende Tag

    < ul >
        < li > one
        < li > two
        < li > three
    < /ul>
    

Fügen white-space: nowrap dem Containerelement white-space: nowrap :

CSS:

* {
    box-sizing: border-box;
}
.row {
    vertical-align: top;
    white-space: nowrap;
}
.column{
    float: left;
    display: inline-block;
    width: 50% // Or whatever in your case
}

HTML:

<div class="row">
    <div class="column"> Some stuff</div>
    <div class="column">Some other stuff</div>
</div>

Hier ist der Plunker .


Fügen Sie Kommentare zwischen Elementen hinzu, um KEINE Leerzeichen zu erhalten. Für mich ist es einfacher, die Schriftgröße auf null zurückzusetzen und sie dann zurückzusetzen.

<div>
    Element 1
</div><!--
--><div>
    Element 2
</div>

Ich bin mir nicht sicher, ob du zwei blaue Felder ohne Lücke machen willst oder mit anderem Leerzeichen umgehen willst, aber wenn du die Lücke entfernen willst:

span {
    display: inline-block;
    width: 100px;
    background: blue;
    font-size: 30px;
    color: white;
    text-align: center;

    float: left;
}

Und fertig.


Ich denke, dass es eine sehr einfache / alte Methode dafür gibt, die von allen Browsern sogar IE 6/7 unterstützt wird. Wir könnten einfach den letter-spacing auf einen großen negativen Wert im Elternteil setzen und ihn dann wieder auf normal Elemente setzen:

body { font-size: 24px }
span { border: 1px solid #b0b0c0; } /* show borders to see spacing */

.no-spacing { letter-spacing: -1em; } /* could be a large negative value */
.no-spacing > * { letter-spacing: normal; } /* => back to normal spacing */
<p style="color:red">Wrong (default spacing):</p>

<div class="">
  <span>Item-1</span>
  <span>Item-2</span>
  <span>Item-3</span>
</div>

<hr/>

<p style="color:green">Correct (no-spacing):</p>

<div class="no-spacing">
  <span>Item-1</span>
  <span>Item-2</span>
  <span>Item-3</span>
</div>


Ich habe die font-size: 0 Lösung für ein ähnliches Problem in React und Sass für ein Free Code Camp-Projekt ausprobiert, mit dem ich gerade arbeite.

Und es funktioniert!

Zuerst das Skript:

var ActionBox = React.createClass({
    render: function() {
        return(
            <div id="actionBox">
                </div>
        );
    },
});

var ApplicationGrid = React.createClass({
    render: function() {
        var row = [];
        for(var j=0; j<30; j++){
            for(var i=0; i<30; i++){
                row.push(<ActionBox />);
            }
        }
        return(
            <div id="applicationGrid">
                {row}
            </div>
        );
     },
});

var ButtonsAndGrid = React.createClass({
    render: function() {
        return(
            <div>
                <div id="buttonsDiv">
                </div>
                <ApplicationGrid />
            </div>
        );
    },
});

var MyApp = React.createClass({
    render: function() {
        return(
            <div id="mainDiv">
                <h1> Game of Life! </h1>
                <ButtonsAndGrid />
            </div>
        );
    },
});

ReactDOM.render(
    <MyApp />,
    document.getElementById('GoL')
);

Dann der Sass:

html, body
    height: 100%

body
    height: 100%
    margin: 0
    padding: 0

#mainDiv
    width: 80%
    height: 60%
    margin: auto
    padding-top: 5px
    padding-bottom: 5px
    background-color: DeepSkyBlue
    text-align: center
    border: 2px solid #381F0B
    border-radius: 4px
    margin-top: 20px

#buttonsDiv
    width: 80%
    height: 60%
    margin: auto
    margin-bottom: 0px
    padding-top: 5px
    padding-bottom: 0px
    background-color: grey
    text-align: center
    border: 2px solid #381F0B
    border-radius: 4px
    margin-top: 20px

#applicationGrid
    width: 65%
    height: 50%
    padding-top: 0px
    margin: auto
    font-size: 0
    margin-top: 0px
    padding-bottom: 5px
    background-color: white
    text-align: center
    border: 2px solid #381F0B
    border-radius: 4px
    margin-top: 20px

#actionBox
    width: 20px
    height: 20PX
    padding-top: 0px
    display: inline-block
    margin-top: 0px
    padding-bottom: 0px
    background-color: lightgrey
    text-align: center
    border: 2px solid grey
    margin-bottom: 0px

Ich habe eine reine CSS-Lösung gefunden, die in allen Browsern sehr gut funktioniert:

span {
    display: table-cell;
}

Ich werde die Antwort von user5609829 ein wenig erweitern, da ich glaube, dass die anderen Lösungen hier zu kompliziert sind / zu viel Arbeit. Das Anwenden eines margin-right: -4px auf die Inline-Blockelemente wird den Abstand entfernen und wird von allen Browsern unterstützt. Siehe die aktualisierte Geige here . Für diejenigen, die negative Ränder verwenden, versuchen Sie this lesen.


Im Allgemeinen verwenden wir Elemente wie diese in verschiedenen Zeilen, aber im Fall von display:inline-block mit Tags in der gleichen Zeile wird den Raum entfernen, aber in einer anderen Zeile nicht.

Ein Beispiel mit Tags in einer anderen Zeile:

p span {
  display: inline-block;
  background: red;
}
<p>
  <span> Foo </span>
  <span> Bar </span>
</p>

Beispiel mit Tags in derselben Zeile

p span {
  display: inline-block;
  background: red;
}
<p>
  <span> Foo </span><span> Bar </span>
</p>

Eine weitere effiziente Methode ist ein CSS-Job, der font-size:0 zum übergeordneten Element verwendet und einem untergeordneten Element so viele font-size zur Verfügung stellt, wie Sie möchten.

p {
  font-size: 0;
}
p span {
  display: inline-block;
  background: red;
  font-size: 14px;
}
<p>
  <span> Foo </span>
  <span> Bar </span>
</p>

Die obigen Methoden funktionieren möglicherweise nicht in Abhängigkeit von der gesamten Anwendung, aber die letzte Methode ist eine narrensichere Lösung für diese Situation und kann überall verwendet werden.


Leider ist es 2015 und der white-space-collapse ist noch nicht implementiert.

In der Zwischenzeit geben Sie das übergeordnete Element font-size: 0; und legen Sie die font-size für die Kinder fest. Dies sollte den Trick machen


Mit PHP Klammern:

ul li {
  display: inline-block;
}
    <ul>
        <li>
            <div>first</div>
        </li><?
        ?><li>
            <div>first</div>
        </li><?
        ?><li>
            <div>first</div>
        </li>
    </ul>


Obwohl technisch keine Antwort auf die Frage: "Wie entferne ich den Abstand zwischen Inline-Block-Elementen?"

Sie können die Flexbox-Lösung ausprobieren und den folgenden Code anwenden. Der Speicherplatz wird dann entfernt.

p {
   display: flex;
   flex-direction: row;
}

Sie können mehr über diesen Link erfahren: https://css-tricks.com/snippets/css/a-guide-to-flexbox/


Ok, obwohl ich sowohl die font-size: 0; und die not implemented CSS3 feature Antworten, nach dem Versuch habe ich herausgefunden, dass keine von ihnen eine echte Lösung ist .

Tatsächlich gibt es nicht einmal einen Workaround ohne starke Nebenwirkungen.

Dann habe ich beschlossen, die Leerzeichen (diese Antwort bezieht sich auf dieses Argument) zwischen den inline-block Divs aus meiner HTML Quelle ( JSP ) zu entfernen.

<div class="inlineBlock">
    I'm an inline-block div
</div>
<div class="inlineBlock">
    I'm an inline-block div
</div>

dazu

<div class="inlineBlock">
    I'm an inline-block div
</div><div class="inlineBlock">
    I'm an inline-block div
</div>

das ist hässlich, aber funktioniert.

Aber, warte Taglibs loops ... Was Taglibs loops wenn ich meine Divs in Taglibs loops ( Struts2 , JSTL , etc ...) Taglibs loops ?

Beispielsweise:

<s:iterator begin="0" end="6" status="ctrDay">
    <br/>
    <s:iterator begin="0" end="23" status="ctrHour">
        <s:push value="%{days[#ctrDay.index].hours[#ctrHour.index]}">
            <div class="inlineBlock>
                I'm an inline-block div in a matrix 
                (Do something here with the pushed object...)
           </div>
       </s:push>
    </s:iterator>
</s:iterator>

Es ist absolut nicht denkbar, all das Zeug in die Reihe zu bringen, das würde bedeuten

<s:iterator begin="0" end="6" status="ctrDay">
    <br/>
    <s:iterator begin="0" end="23" status="ctrHour"><s:push value="%{days[#ctrDay.index].hours[#ctrHour.index]}"><div class="inlineBlock>
                I'm an inline-block div in a matrix             
                (Do something here with the pushed object...)
           </div></s:push></s:iterator>
</s:iterator>

das ist nicht lesbar, schwer zu behalten und zu verstehen, etc ...

Die Lösung, die ich gefunden habe:

Verwenden Sie HTML-Kommentare, um das Ende eines Div mit dem Anfang des nächsten zu verbinden!

<s:iterator begin="0" end="6" status="ctrDay">
   <br/>
   <s:iterator begin="0" end="23" status="ctrHour"><!--
    --><s:push value="%{days[#ctrDay.index].hours[#ctrHour.index]}"><!--
        --><div class="inlineBlock>
                I'm an inline-block div in a matrix             
                (Do something here with the pushed object...)
           </div><!--
    --></s:push><!--
--></s:iterator>
</s:iterator>

Auf diese Weise erhalten Sie einen lesbaren und korrekt eingerückten Code.

Und als positiven Nebeneffekt wird die HTML source , obwohl sie von leeren Kommentaren befallen ist, korrekt eingerückt;

Nehmen wir das erste Beispiel, imho dies:

    <div class="inlineBlock">
        I'm an inline-block div
    </div><!--
 --><div class="inlineBlock">
        I'm an inline-block div
    </div>

ist besser als das

    <div class="inlineBlock">
         I'm an inline-block div
    </div><div class="inlineBlock">
         I'm an inline-block div
    </div>

Ich hoffe, das hilft...


Zwei weitere Optionen basieren auf dem CSS-Textmodul Level 3 (anstelle von white-space-collapsing:discard der aus dem Spezifikationsentwurf entfernt wurde):

  • word-spacing: -100%;

In der Theorie sollte es genau das tun, was benötigt wird - verkürzen Sie Leerzeichen zwischen "Wörtern" durch die 100% der Leerzeichenbreite, dh auf Null. Aber leider scheint es nirgends zu funktionieren, und dieses Feature ist als "gefährdet" markiert (es kann auch aus der Spezifikation gestrichen werden).

  • word-spacing: -1ch;

Es verkürzt die Zwischenworträume um die Breite der Ziffer "0". In einer Monospace-Schriftart sollte es genau gleich der Breite des Leerzeichen (und auch jedes anderen Zeichens) sein. Dies funktioniert in Firefox 10+, Chrome 27+ und funktioniert fast in Internet Explorer 9+.

Fiddle


display: flex; zum übergeordneten Element. Hier ist die Lösung mit einem Präfix:

p {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
}
span {
  float: left;
  display: inline-block;
  width: 100px;
  background: blue;
  font-size: 30px;
  color: white;
  text-align: center;
}
<p>
  <span> Foo </span>
  <span> Bar </span>
</p>





css