还有一些其他问题已经解决了如何最好地应用text-align: justify以使内联块元素均匀分布...例如,我如何*真正*证明HTML + CSS中的水平菜单?
但是,"清除"内联块元素行的100%宽度元素由浏览器给出了自己的行.我无法弄清楚如何在不使用line-height: 0;父元素的情况下摆脱那个空的垂直空间.
有关问题的示例,请参阅此小提琴
对于我使用的解决方案line-height: 0;,请看这个小提琴
我正在使用的解决方案要求将新line-height元素应用于子元素,但任何先前设置line-height都将丢失.有人知道更好的解决方案吗?我想避免表格,以便元素可以在必要时包装,还有flexbox,因为浏览器支持还没有.我也想避免浮动,因为间隔开的元素数量是任意的.
我有11个点使用CSS水平排列。如何<span>根据浏览器窗口的宽度均匀/平均地分配元素之间的间距(我是元素)?
到目前为止,这是我的示例代码:
span.circle {
height: 20px;
width: 20px;
border-radius: 100%;
border: 1px solid #eee;
background:#ddd;
position: absolute;
left:0;
top: 45px;
cursor: pointer;
transition: all 0.4s ease-in-out;
}
#second{
left: 190px;
}
#third{
left: 380px;
}
#fourth{
left: 570px;
}
#five{
left: 760px;
}
#six{
left: 950px;
}
#seven{
left: 1140px;
}
#eight{
left: 1330px;
}
#nine{
left: 1520px;
}
#ten{
left: 1710px;
}
#eleven{
left: 1900px;
}Run Code Online (Sandbox Code Playgroud)
<span id="first" class="border-change circle"></span>
<span id="second" class="circle"></span>
<span id="third" class="circle"></span>
<span …Run Code Online (Sandbox Code Playgroud)