如何在 html 中添加 3 行?
How can I add 3 line in html?
如何在 HTML 中添加 3 行?
喜欢附上的照片
您可以这样使用 flexbox
:
.row {
box-sizing: border-box;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-flex: 0;
-ms-flex: 0 1 auto;
flex: 0 1 auto;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-direction: row;
flex-direction: row;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
margin-right: -.5rem;
margin-left: -.5rem;
}
.col {
-webkit-box-flex: 1;
-ms-flex-positive: 1;
flex-grow: 1;
-ms-flex-preferred-size: 0;
flex-basis: 0;
max-width: 100%;
}
.list {
position:relative;
display:block;
padding:0;
}
.list li{
position:relative;
display:block;
margin-bottom:5px;
padding-left:15px;
}
.list li:before{
content:'>';
position:absolute;
left:0;
}
<div class="row">
<div class="col">
<ul class="list">
<li>Contact us</li>
<li>about us</li>
</ul>
</div>
<div class="col">
<ul class="list">
<li>Contact us</li>
<li>about us</li>
</ul>
</div>
<div class="col">column</div>
</div>
如何在 HTML 中添加 3 行? 喜欢附上的照片
您可以这样使用 flexbox
:
.row {
box-sizing: border-box;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-flex: 0;
-ms-flex: 0 1 auto;
flex: 0 1 auto;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-direction: row;
flex-direction: row;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
margin-right: -.5rem;
margin-left: -.5rem;
}
.col {
-webkit-box-flex: 1;
-ms-flex-positive: 1;
flex-grow: 1;
-ms-flex-preferred-size: 0;
flex-basis: 0;
max-width: 100%;
}
.list {
position:relative;
display:block;
padding:0;
}
.list li{
position:relative;
display:block;
margin-bottom:5px;
padding-left:15px;
}
.list li:before{
content:'>';
position:absolute;
left:0;
}
<div class="row">
<div class="col">
<ul class="list">
<li>Contact us</li>
<li>about us</li>
</ul>
</div>
<div class="col">
<ul class="list">
<li>Contact us</li>
<li>about us</li>
</ul>
</div>
<div class="col">column</div>
</div>