[英]How to add margin/padding i.e space right to the end of the last element if we have extremely long horizontal scrolling page?
How to add some space to the right of last element ie in our case after 20th box of 100px*100px aligned right to each other.如何在最后一个元素的右侧添加一些空间,即在我们的例子中,在第 20 个 100px*100px 的框相互对齐之后。 jsfiddle
jsfiddle
html html
<div class="container">
<div class="element" v-for="element in 20" :key="element">{{ element }}</div>
</div>
css css
.container {
display: flex;
flex-direction: row;
padding-right: 50px; // not working
margin-right: 50px; // not working
}
.element {
margin: 16px;
min-width: 100px;
height: 100px;
background-color: #ddd;
border-radius: 10px;
}
I added a我添加了一个
display: inline-flex;
to.container and then it works to.container 然后它就可以工作了
You can see it here: https://jsfiddle.net/q2f6710x/4/你可以在这里看到它: https://jsfiddle.net/q2f6710x/4/
And you can add a你可以添加一个
overflow: auto;
to #app到#app
to make it scrollable: https://jsfiddle.net/2uex398f/使其可滚动: https://jsfiddle.net/2uex398f/
Try to add to your container class also justify-content:center.尝试添加到您的容器 class 也 justify-content:center。
.container {
display: flex;
flex-direction: row;
justify-content:center;
}
You can always add bootstrap to you're code through,您可以随时将引导程序添加到您的代码中,
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
Or at this website https://getbootstrap.com/docs/4.3/getting-started/download/或者在这个网站上https://getbootstrap.com/docs/4.3/getting-started/download/
If you add bootstrap you can use classes such as如果添加引导程序,则可以使用诸如
class="mr-1"
or或者
class="pr-1"
where 1 can be replaced by any number to increase padding or margin其中 1 可以替换为任意数字以增加填充或边距
you can also keep all prior styling.您还可以保留所有先前的样式。
Did you try marking those properties as important?您是否尝试将这些属性标记为重要?
.container {
display: flex;
flex-direction: row;
padding-right: 50px !important; // not working
margin-right: 50px !important; // not working
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.