我有一个列表,我想水平显示我的li
元素,每行3个。我一直在试着得到我想要的,但是没有成功。有解决方案吗?
<div class="serv">
<ul>
@foreach(App\Http\Controllers\HomeController::getservice($service->id) as
$key => $value)
<li>
<span class="h3-service">{{$value->title}}</span>
<p>{!!$value->description!!}</p>
</li>
@endforeach
</ul>
</div>
.serv ul {
display: inline-flex;
margin: 0;
padding: 0;
width: 33%;
text-align: left;
float: left;
}
.serv ul li {
list-style: none;
display: inline-block;
padding: 0;
}
.serv ul li span {
padding: 0;
}
发布于 2021-08-09 13:15:29
body {
margin: 0px;
}
.parent {
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.flex-item{
/*
All you need to do this play with this number (343) according to aviable width and item width
Formula: (ParentWidth / 3) - margin (ParentWidth divide by 3 subtracte by margin[if you want e.g in my case i set 10] )
Stackoverflow Run Code Snippet width = 633.82px (not sure)
Margin = 10px
*/
flex: 0 0 192px; /* play with this number */
background: red;
margin: 10px;
}
<div class="parent">
<div class="flex-item">1</div>
<div class="flex-item">2</div>
<div class="flex-item">3</div>
<div class="flex-item">4</div>
<div class="flex-item">5</div>
<div class="flex-item">6</div>
<div class="flex-item">7</div>
<div class="flex-item">8</div>
<div class="flex-item">9</div>
<div class="flex-item">10</div>
</div>
https://stackoverflow.com/questions/48464444
复制相似问题