使用注釋來解決關于inline-block元素換行問題

TigerChain 發布于2019-04-23 13:43 / 3147人閱讀

摘要：原因在于的對齊問題。然后就有人推薦了一篇文章關于你需要知道的事情其中里面最后一個例子講到了如何解決元素換行的問題。里面說用注釋可以解決換行問題，我測試了下發現和注釋完全沒有關系。

昨天群里有人問個問題：為什么button加了文字后，產生了對齊不一致的問題。

原因在于baseline的對齊問題。

然后就有人推薦了一篇文章：關于Vertical-Align你需要知道的事情

其中里面最后一個例子講到了如何解決inline元素換行的問題。

里面說用注釋可以解決換行問題，我測試了下發現和注釋完全沒有關系。

?換行的原因在于div與div換行制表符產生的空隙，所以要避免換行的話，那就讓div和div挨著一起不要換行，或者設置容器font-size為0，因為制表符的大小受font-size影響。

測試

首先是按照它說的來，是這樣的。

DOCTYPE html>
<html>
<head>
    <title>testtitle>
    <style type="text/css">
        *{
            margin: 0;
            padding: 0;
        }
        #container{
            width:800px;
            height: 300px;
            border: 1px solid #ccc;
        }
        .box{
            width: 400px;
            height: 100px;
            margin: 10px 20px;
            border: 1px solid #ccc;
        }
          .half { 
              height:40px; 
              display: inline-block;
             width: 50%; 
             vertical-align: bottom;
         }
         .left{
             background-color: #8ab3bf;
         }
         .right{
             background-color: #C1CD89;
         }
    style>
head>
<body>
<div id="container">
    <div id="test1" class="box">
        <div class="half left">50% widediv>
        <div class="half right">50% wide... and in next linediv>
    div>
    <div id="test2" class="box">
        <div class="half left">50% widediv>
        
        <div class="half right">50% widediv>
    div>
div>
body>
html>

結果是這樣的：

可以看到，有沒有注釋都會換行，那么我們測試下div與div挨著一起

<div id="container">
    <div id="test1" class="box">
        <div class="half left">50% widediv><div class="half right">50% wide... and in next linediv>
    div>
    <div id="test2" class="box">
        <div class="half left">50% widediv><div class="half right">50% widediv>
    div>
div>

結果為

可以看到當div與div挨著一起的時候，也就是沒有了換行的制表符，因此沒有了空隙，就可以并排一行了。

此外，也可以設置父容器font-size為0也可以達到這種效果。

.box{
        width: 400px;
        height: 100px;
        margin: 10px 20px;
        border: 1px solid #ccc;
        font-size: 0;
    }


<div id="container">
    <div id="test1" class="box">
        <div class="half left">50% widediv>
        <div class="half right">50% wide... and in next linediv>
    div>
    <div id="test2" class="box">
        <div class="half left">50% widediv>
        
        <div class="half right">50% widediv>
    div>
div>

結果為

云服務器 GPU云服務器 textarea換行問題 java換行符問題關于php問題元素 type問題

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/2249.html

瀏覽器兼容問題

摘要：一什么是瀏覽器兼容問題所謂的瀏覽器兼容性問題，是指因為不同的瀏覽器對同一段代碼有不同的解析，造成頁面顯示效果不統一的情況。條件注釋最初于微軟的瀏覽器中出現，并且直至均支持。一、什么是瀏覽器兼容問題所謂的瀏覽器兼容性問題，是指因為不同的瀏覽器對同一段代碼有不同的解析，造成頁面顯示效果不統一的情況。在大多數情況下，我們的需求是，無論用戶用什么瀏覽器來查看我們的網站或者登陸我們的系統，都...

wenshi11019 2019-08-26 13:57 評論0 收藏0
[譯]HTML&CSS Lesson5: 定位

摘要：浮動定位的其中一種方法就是使用屬性。例如，是一個內聯元素，它默認的值為和值是不生效的。然而，如果我們將這個內聯元素設置為浮動，那么它的默認值會變成這時候和值就生效了。包裹元素就是將浮動元素置于父元素中，父元素作為容器會置于正常的文件流中。 CSS最大的用處之一就是可以將內容和元素定位到任何我們想要的位置，使我們的設計具有結構，使內容更加易懂。 CSS有好幾種不同的定位屬性，每種都有自己...

YorkChen 2019-08-01 17:39 評論0 收藏0
[譯]HTML&CSS Lesson5: 定位

摘要：浮動定位的其中一種方法就是使用屬性。例如，是一個內聯元素，它默認的值為和值是不生效的。然而，如果我們將這個內聯元素設置為浮動，那么它的默認值會變成這時候和值就生效了。包裹元素就是將浮動元素置于父元素中，父元素作為容器會置于正常的文件流中。 CSS最大的用處之一就是可以將內容和元素定位到任何我們想要的位置，使我們的設計具有結構，使內容更加易懂。 CSS有好幾種不同的定位屬性，每種都有自己...

_Dreams 2019-08-29 13:29 評論0 收藏0
CSS基礎篇--如何解決inline-block元素的空白間距

摘要：先看結構代碼在的元素之間存在的空白如圖第一種就是改變結構結構一這種方法接近標簽換行格式的寫法，也更趨近閱讀。當然有些文章介紹使用來解決，這也是跟元素的字號有極大的關系。如果元素是一個，則查找文檔內容。如果節點是元素節點，則屬性將返回。早上在博客中有人提了這樣一個問題：li元素inline-block橫向排列，出現了未知間隙，我相信大家在寫頁面的時候都遇到過這樣的情況吧。我一般遇到這...

JowayYoung 2019-08-28 18:16 評論0 收藏0