tag:forum.selfhtml.org,2005:/self Lernen auf W3schools: Display: inline-block; – Wofür bitte, wenn width und height fehlen? – SELFHTML-Forum 2021-03-13T07:06:04Z https://forum.selfhtml.org/self/2021/mar/12/lernen-auf-w3schools-display-inline-block-wofur-bitte-wenn-width-und-height-fehlen/1785653?srt=yes#m1785653 Waldfee68 martinaledermann@gmail.com 2021-03-12T13:04:07Z 2021-03-12T23:15:12Z Lernen auf W3schools: Display: inline-block; – Wofür bitte, wenn width und height fehlen? <p>Hallo,</p> <p>ich hätte bitte noch eine Frage. Derzeit lerne ich täglich auf W3Schools. Ich bin jedoch auf eine Sache gestoßen, die ich nicht verstehe und wo auch keine Erklärung dafür zu finden ist. Es geht um den folgenden Code:</p> <pre><code class="block language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>style</span><span class="token punctuation">></span></span><span class="token style"><span class="token language-css"> <span class="token selector">a:link, a:visited</span> <span class="token punctuation">{</span> <span class="token property">background-color</span><span class="token punctuation">:</span> #f44336<span class="token punctuation">;</span> <span class="token property">color</span><span class="token punctuation">:</span> white<span class="token punctuation">;</span> <span class="token property">padding</span><span class="token punctuation">:</span> 15px 25px<span class="token punctuation">;</span> <span class="token property">text-align</span><span class="token punctuation">:</span> center<span class="token punctuation">;</span> <span class="token property">text-decoration</span><span class="token punctuation">:</span> none<span class="token punctuation">;</span> ** <span class="token property">display</span><span class="token punctuation">:</span> inline-block<span class="token punctuation">;</span>** <span class="token punctuation">}</span> <span class="token selector">a:hover, a:active</span> <span class="token punctuation">{</span> <span class="token property">background-color</span><span class="token punctuation">:</span> red<span class="token punctuation">;</span> <span class="token punctuation">}</span> </span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>style</span><span class="token punctuation">></span></span> </code></pre> <p>In der Erklärung, die ich online finden konnte, hieß es, dass "display: inline-block;" dann geschrieben wird, wenn man "width" und "height" hinzufügen möchte oder muss. Ich kann jedoch keine dieser beiden Elemente finden und verstehe deshalb nicht, weshalb es dort überhaupt steht. Hätte jemand bitte Zeit und Lust, mir dies zu erklären? Vielen lieben Dank! Herzliche Grüße und bleibt alle gesund!</p> <p>Waldfee68</p> <div class="signature">-- <br> Auch der längste Weg beginnt mit dem ersten Schritt. (Chinesisches Sprichwort) Kein Weg ist lang mit einem Freund an der Seite. (Chinesisches Sprichwort)<br> (URL Spam entfernt) </div> https://forum.selfhtml.org/self/2021/mar/12/lernen-auf-w3schools-display-inline-block-wofur-bitte-wenn-width-und-height-fehlen/1785654?srt=yes#m1785654 Mr.Murphy 2021-03-12T13:13:33Z 2021-03-12T13:13:33Z Lernen auf W3schools: Display: inline-block; – Wofür bitte, wenn width und height fehlen? <p>Inline-Block wurde früher hauptsächlich verwendet, um Elemente mit Abstand nebeneinander darzustellen, zum Beispiel bei Navigationen.</p> <p>Es wird zwar auch zukünftig von den Browsern unterstützt werden, wird aber dank Flexbox (display: flex) und CSS-Grid (display: grid) nicht mehr benötigt. Zumal es einige Nebenwirkungen hat, die grade Neulinge überfordern.</p> https://forum.selfhtml.org/self/2021/mar/12/lernen-auf-w3schools-display-inline-block-wofur-bitte-wenn-width-und-height-fehlen/1785655?srt=yes#m1785655 Rolf B 2021-03-12T13:27:00Z 2021-03-12T13:27:00Z Lernen auf W3schools: Display: inline-block; – Wofür bitte, wenn width und height fehlen? <p>Hallo Waldfee68,</p> <p>inline-block hat noch andere Eigenschaften. Ein normales inline-Element kann mittendrin umgebrochen werden, was bei einem Link störend wirken kann. Mit inline-block bleibt das a Element auf einer Zeile, es sei denn, es passt als ganzes nicht mehr in seinen Container. Erst dann wird sein Inhalt umgebrochen.</p> <p>Es gibt Fälle, wo sowas nützlich ist.</p> <p><code>text-align: center;</code> in einem inline-block Element ohne width ist übrigens auch Unsinn, wenn die Box so groß ist wie ihr Inhalt, bewirkt Zentrieren nichts.</p> <p><em>Rolf</em></p> <div class="signature">-- <br> sumpsi - posui - obstruxi </div> https://forum.selfhtml.org/self/2021/mar/12/lernen-auf-w3schools-display-inline-block-wofur-bitte-wenn-width-und-height-fehlen/1785658?srt=yes#m1785658 Gunnar Bittersmann selfhtml@bittersmann.de https://bittersmann.de 2021-03-12T13:53:23Z 2021-03-12T13:53:23Z Lernen auf W3schools: Display: inline-block; – Wofür bitte, wenn width und height fehlen? <p>@@Waldfee68</p> <blockquote> <pre><code class="block language-css"><span class="token property">a</span><span class="token punctuation">:</span>link<span class="token punctuation">,</span> <span class="token property">a</span><span class="token punctuation">:</span>visited </code></pre> </blockquote> <p>Der Selektor mach keinen Sinn. Das tut dasselbe wie <code>a</code> (von der Spezifität abgesehen, die man hier aber wohl nicht braucht).</p> <blockquote> <pre><code class="block language-css"><span class="token property">a</span><span class="token punctuation">:</span>hover<span class="token punctuation">,</span> <span class="token property">a</span><span class="token punctuation">:</span>active </code></pre> </blockquote> <p>Oft sollte man das, was man für <code>:hover</code> tut, auch für <code>:focus</code> (Tastaturbedienung) tun.</p> <p> LLAP</p> <div class="signature">-- <br> <em lang="en">“When I was 5 years old, my mother always told me that happiness was the key to life. When I went to school, they asked me what I wanted to be when I grew up. I wrote down ‘happy.’ They told me I didn’t understand the assignment, and I told them they didn’t understand life.”</em> —John Lennon </div> https://forum.selfhtml.org/self/2021/mar/12/lernen-auf-w3schools-display-inline-block-wofur-bitte-wenn-width-und-height-fehlen/1785693?srt=yes#m1785693 Waldfee68 2021-03-13T07:04:31Z 2021-03-13T07:16:47Z Lernen auf W3schools: Display: inline-block; – Wofür bitte, wenn width und height fehlen? <p>Lieber Mr. Murphy, vielen Dank! Eine tolle Erklärung. Es steht noch in W3Schools im HTML-Bereich. Soweit ich weiß, geht W3Schools später auf das Flexbox-Modell ein. Danke! :-) Viele Grüße Waldfee68</p> <div class="signature">-- <br> Auch der längste Weg beginnt mit dem ersten Schritt. (Chinesisches Sprichwort) Kein Weg ist lang mit einem Freund an der Seite. (Chinesisches Sprichwort) [SPAM vom Moderator gelöscht] </div> https://forum.selfhtml.org/self/2021/mar/12/lernen-auf-w3schools-display-inline-block-wofur-bitte-wenn-width-und-height-fehlen/1785656?srt=yes#m1785656 Gunnar Bittersmann selfhtml@bittersmann.de https://bittersmann.de 2021-03-12T13:36:05Z 2021-03-12T13:36:05Z Lernen auf W3schools: Display: inline-block; – Wofür bitte, wenn width und height fehlen? <p>@@Rolf B</p> <blockquote> <p>inline-block hat noch andere Eigenschaften. Ein normales inline-Element kann mittendrin umgebrochen werden, was bei einem Link störend wirken kann. Mit inline-block bleibt das a Element auf einer Zeile, es sei denn, es passt als ganzes nicht mehr in seinen Container. Erst dann wird sein Inhalt umgebrochen.</p> </blockquote> <p>In der Zeit, wo ich <a href="https://codepen.io/gunnarbittersmann/pen/yLVZawz?editors=0100" rel="noopener noreferrer">ein Beispiel</a> gecoded habe, hast du die Erklärung dazu geschrieben. Fein, dann kann ich mir die ja sparen.</p> <p> LLAP</p> <div class="signature">-- <br> <em lang="en">“When I was 5 years old, my mother always told me that happiness was the key to life. When I went to school, they asked me what I wanted to be when I grew up. I wrote down ‘happy.’ They told me I didn’t understand the assignment, and I told them they didn’t understand life.”</em> —John Lennon </div> https://forum.selfhtml.org/self/2021/mar/12/lernen-auf-w3schools-display-inline-block-wofur-bitte-wenn-width-und-height-fehlen/1785694?srt=yes#m1785694 Waldfee68 2021-03-13T07:06:04Z 2021-03-13T07:16:05Z Lernen auf W3schools: Display: inline-block; – Wofür bitte, wenn width und height fehlen? <p>Lieber Rolf, vielen lieben Dank! Gruß Waldfee68</p> <div class="signature">-- <br> Auch der längste Weg beginnt mit dem ersten Schritt. (Chinesisches Sprichwort) Kein Weg ist lang mit einem Freund an der Seite. (Chinesisches Sprichwort) [SPAM vom Moderator gelöscht] </div> https://forum.selfhtml.org/self/2021/mar/12/lernen-auf-w3schools-display-inline-block-wofur-bitte-wenn-width-und-height-fehlen/1785659?srt=yes#m1785659 Rolf B 2021-03-12T14:06:30Z 2021-03-12T14:06:30Z Lernen auf W3schools: Display: inline-block; – Wofür bitte, wenn width und height fehlen? <p>Hallo Gunnar,</p> <blockquote> <p>a:link (...) tut dasselbe wie a</p> </blockquote> <p>Dass ich Dir mal "Nein" sagen muss...</p> <pre><code class="block language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span><span class="token punctuation">></span></span>Hallo Welt> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>https://goo.gl/maps/oVU3CNYjzBaZck57A<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Hallo Welt<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span> </code></pre> <p>a:link styled nur den zweiten.</p> <p><em>Rolf</em></p> <div class="signature">-- <br> sumpsi - posui - obstruxi </div> https://forum.selfhtml.org/self/2021/mar/12/lernen-auf-w3schools-display-inline-block-wofur-bitte-wenn-width-und-height-fehlen/1785662?srt=yes#m1785662 Gunnar Bittersmann selfhtml@bittersmann.de https://bittersmann.de 2021-03-12T14:36:53Z 2021-03-12T14:36:53Z Lernen auf W3schools: Display: inline-block; – Wofür bitte, wenn width und height fehlen? <p>@@Rolf B</p> <blockquote> <p>Dass ich Dir mal "Nein" sagen muss...</p> </blockquote> <p>Ich mache hier bestimmt mehr Fehler als die, die gefunden werden. </p> <blockquote> <pre><code class="block language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span><span class="token punctuation">></span></span>Hallo Welt> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>https://goo.gl/maps/oVU3CNYjzBaZck57A<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Hallo Welt<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span> </code></pre> <p>a:link styled nur den zweiten.</p> </blockquote> <p>Aber auch nur, solange der Link nicht besucht wurde. <code>:link</code> tut nämlich nicht das, was die Benennung vermuten lässt. Anders gesagt: <code>:link</code> ist völlig falsch benannt.</p> <p>Deshalb sprach ich auch über <code>a:link, a:visited</code>. Aber du hast recht, das stylt nur Links, keine <code>a</code>-Elemente ohne <code>href</code>-Attribut.</p> <p>Ich ändere meine Aussage zu: <code>a:link, a:visited</code> tut dasselbe wie <code>a[href]</code> – und das auch mit derselben Spezifität.</p> <p>Oder wie <code>a:any-link</code>, was mittlerweile auch von allen relevanten Browsern außer Opera Mini <a href="https://caniuse.com/?search=%3Aany-link" rel="noopener noreferrer">unterstützt</a> wird. (Es sei den, man ist in der misslichen Lage eine Zielgruppe zu haben, für die der IE noch irgendeine Relevanz hat.)</p> <p> LLAP</p> <div class="signature">-- <br> <em lang="en">“When I was 5 years old, my mother always told me that happiness was the key to life. When I went to school, they asked me what I wanted to be when I grew up. I wrote down ‘happy.’ They told me I didn’t understand the assignment, and I told them they didn’t understand life.”</em> —John Lennon </div>