CSS內嵌塊空白

我TRIE做不同的things，但似乎無法拿到2這裏直列塊之間擺脫白色空間，從而list不是旁邊inline-block-div：CSS內嵌塊空白

.parent { 
 
    border: 10px solid red; 
 
} 
 

 
.list { 
 
    border: 5px solid green; 
 
    margin-top: 0; 
 
    display: inline-block; 
 
    width: 25%; 
 
} 
 

 
.inline-block-div { 
 
    border: 5px solid blue; 
 
    display: inline-block; 
 
    vertical-align: top; 
 
    width: 75%; 
 
}

<div class="parent"> 
 
    <div class="list"> 
 
    <ul> 
 
     <li>one</li> 
 
     <li>two</li> 
 
     <li>three</li> 
 
    </ul> 
 
    </div> 
 
    <div class="inline-block-div">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Iste pariatur autem ipsam. Quidem beatae ipsum mollitia unde ab vitae consequatur culpa alias accusantium corporis. Sapiente autem voluptatibus sunt asperiores temporibus.</div> 
 

 
</div>

來源

2017-08-10 stackjlei

我推薦使用flex。 Flex對開發非常有用。

.parent { 
 
    border: 10px solid red; 
 
    display: flex; 
 
} 
 

 
.list { 
 
    border: 5px solid green; 
 
    margin-top: 0; 
 
    display: inline-block; 
 
    width: 25%; 
 
} 
 

 
.inline-block-div { 
 
    display: inline-block; 
 
    vertical-align: top; 
 
    width: 75%; 
 
}

<div class="parent"> 
 
    <div class="list"> 
 
    <ul> 
 
     <li>one</li> 
 
     <li>two</li> 
 
     <li>three</li> 
 
    </ul> 
 
    </div> 
 
    <div class="inline-block-div">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Iste pariatur autem ipsam. Quidem beatae ipsum mollitia unde ab vitae consequatur culpa alias accusantium corporis. Sapiente autem voluptatibus sunt asperiores temporibus.</div> 
 

 
</div>

來源

2017-08-10 07:03:57 zynkn

我知道我可以做Flexbox的，但我想知道爲什麼inline-block的不工作 – stackjlei

我知道您解決問題的方法之一。如果設置* {font-size：0pt}，則無法在內嵌塊之間看到空白區域。但我認爲這不是很好的解決方法。 – zynkn

@stackjlei你想要這樣嗎？ https://codepen.io/anon/pen/mMmNaE – zynkn

可以使父Flexbox，就要把它固定

.parent { 
 
    border: 10px solid red; 
 
    display: flex; 
 
} 
 

 
.list { 
 
    border: 5px solid green; 
 
    margin-top: 0; 
 
    display: inline-block; 
 
    width: 25%; 
 
} 
 

 
.inline-block-div { 
 
    display: inline-block; 
 
    vertical-align: top; 
 
    width: 75%; 
 
}

<div class="parent"> 
 
    <div class="list"> 
 
    <ul> 
 
     <li>one</li> 
 
     <li>two</li> 
 
     <li>three</li> 
 
    </ul> 
 
    </div> 
 
    <div class="inline-block-div">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Iste pariatur autem ipsam. Quidem beatae ipsum mollitia unde ab vitae consequatur culpa alias accusantium corporis. Sapiente autem voluptatibus sunt asperiores temporibus.</div> 
 
</div>

來源

2017-08-10 07:04:36 Gerard

我知道我可以用flexbox做到這一點，但我想了解爲什麼inline-block不起作用 – stackjlei

在這裏您可以找到針對您的問題的不同解決方案的完整解釋https://stackoverflow.com/questions/32801095/inline-block - 盒子不適合在他們的容器 – Gerard

的空間實際上來自HTML。默認空間將被添加到內聯塊元素。我希望你知道要打空間。而您的CSS中的另一個問題是您忘記添加框尺寸：邊框屬性。 75％+左邊框寬度+右邊框寬度：

沒有這一屬性寬度如下

寬度被計算。所以最終你的寬度是 75％+ 10px。如果有任何填充提到，您的寬度將被添加更多。試試這個代碼，而不是

div{ 
 
    box-sizing:border-box; 
 
} 
 
.parent { 
 
    border: 10px solid red; 
 
    width:100% 
 
} 
 

 
.list { 
 
    border: 5px solid green; 
 
    margin-top: 0; 
 
    display: inline-block; 
 
    width: 25%; 
 
} 
 

 
.inline-block-div { 
 
    display: inline-block; 
 
    vertical-align: top; 
 
    width: 75%; 
 
    margin-left:-4px; 
 
    border:5px solid blue 
 
}

<div class="parent"> 
 
    <div class="list"> 
 
    <ul> 
 
     <li>one</li> 
 
     <li>two</li> 
 
     <li>three</li> 
 
    </ul> 
 
    </div> 
 
    <div class="inline-block-div">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Iste pariatur autem ipsam. Quidem beatae ipsum mollitia unde ab vitae consequatur culpa alias accusantium corporis. Sapiente autem voluptatibus sunt asperiores temporibus.</div> 
 

 
</div>

來源

2017-08-10 07:21:05

是的，我忘了添加盒子大小 – stackjlei

CSS內嵌塊空白

回答

相關問題