相关疑难解决方法(0)
Flexbox代码适用于除Safari之外的所有浏览器.为什么？
带有列表标签的网格列,我需要每3列以正确的顺序显示,并为每个额外的HTML列表元素启用自动宽度.
这是我的例子:
<style>
ul {
margin: 0;
padding: 0;
display: -webkit-flex;
display: flex;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
height: 150px;
width:auto;
}
li {
float: left;
display: inline-block;
list-style: none;
position: relative;
height: 50px;
width: 50px;
}
</style><ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>10</li>
<li>11</li>
<li>12</li>
</ul>display: -webkit-flex;.
我想像这样转换输出:
1 4 7 10
2 5 8 11
3 6 9 12
重要的是我到目前为止我的Safari浏览器工作,我似乎无法解决这个问题,我会适当的任何帮助:)
测试链接:
65
推荐指数
推荐指数
2
解决办法
解决办法
7万
查看次数
查看次数
带有图像和分隔符的完全对齐的水平菜单
我想实现这个完全合理的水平菜单：
对齐是通过 Flexbox 完成的并且有效，但是我也无法使分隔的中点对齐；它们是通过伪类使用 css-content 制作的。另外，我想知道是否有更好的方法来垂直居中项目，而不是通过添加填充来伪造它，就像我所做的那样。
这是我的代码和小提琴：
ul {
list-style: none;
padding: 0;
margin: 0;
display: flex;
justify-content: space-between;
}
li.home {
padding: 0;
}
li {
vertical-align: middle;
padding-top: 10px;
}
nav {
border-bottom: 1px solid black;
border-top: 1px solid black;
height: 40px;
}
li::after {
//padding: 0em 0.4em;
content: '\00b7';
pointer-events: none;
}
li.home::after,
li.last::after {
content: none;
text-align: justify;
}<nav id="main-menu">
<ul>
<li class="home">
<a href="/de"><img src="http://dummyimage.com/40x40/000/fff"></a>
</li>
<li class="second"><a href="#">Item 1</a></li>
<li><a href="#">Item …2
推荐指数
推荐指数
1
解决办法
解决办法
966
查看次数
查看次数
如何让多个div以相等的宽度水平排列？
我想要两个、三个或更多的 div 水平排列，那么每个宽度都会填充所有可用空间。例如，对于两个 div，它们将各自占据一半的空间，对于三个 div，它们将占据 1/3 的空间，依此类推。
我尝试使用显示内联块，并且可以让 div 并排排列，但是如何让它们填充父容器的可用宽度？
编辑：最好没有显示弯曲方法（我不确定它是否与 IE11 完全兼容）
.container{
border: solid 1px green;
height: 50px;
box-sizing: border-box;
}
.button{
display:inline-block;
border: solid 1px black;
height: 20px;
}<div class="container">
<div class="button ">
div1
</div>
<div class="button ">
div2
</div>
<div class="button ">
div3
</div>
</div>2
推荐指数
推荐指数
1
解决办法
解决办法
1901
查看次数
查看次数