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内嵌块空白

回答

相关问题