我有一系列按垂直顺序排列的2个按钮。它的图形表示是:
属于按钮的HTML是:
<ul class="child">
<!-- ko foreach: subTabs -->
<li class="color-dark child active" data-bind="css: {active: $data.selected()}, click: select">
<span data-bind="text: i18n($data.title) ">Current coverage</span>
</li>
<li class="color-dark child" data-bind="css: {active: $data.selected()}, click: select">
<span data-bind="text: i18n($data.title) ">Coverage history</span>
</li>
<!-- /ko -->
</ul>
我用于组合按钮的CSS代码是:
@media screen and (max-width: 767px) and (min-width: 320px)
div.default.tabs ul.child:first-child {
background-color: #6f7992;
display: flex;
justify-content: center;
flex-direction: column;
margin-left: 20px;
width: auto;
}
div.default.tabs ul.child:first-child {
background-color: #6f7992;
display: table;
width: auto;
}
.default.tabs ul.child:first-child {
margin: 0px 20px 2px 0;
padding: 0;
width: auto;
}
我用于单个按钮的CSS代码是:
@media screen and (max-width: 767px) and (min-width: 320px)
div.default.tabs ul.child:first-child li.child.active {
color: #0b710c !important;
background-color: #658B01 !important;
}
div.default.tabs ul.child:first-child li.child.active {
color: #0b710c !important;
background-color: #dbefb1 !important;
}
.benefits.header .inner.current span, .default.tabs ul.child:first-child li.child.active {
font-weight: bold;
color: #0074ff;
}
.default.tabs ul.child:first-child li.child.active {
background: url(img/tabs-arrow.png) no-repeat bottom center;
padding-top: 14px;
padding-bottom: 15px;
border: 0;
}
@media screen and (max-width: 767px) and (min-width: 320px)
.default.tabs ul.child:first-child li.child, .default.tabs ul.child:first-child li.child.active {
border-left: 0px !important;
display: table-cell;
position: relative;
}
.default.tabs ul.child:first-child li.child, .default.tabs ul.child:first-child li.child.active {
border-left: 3px solid #fff !important;
display: table-cell;
position: relative;
}
.default.tabs ul.child:first-child li.child.active {
background: url() !important;
}
.default.tabs ul.child:first-child li.active.child {
padding-left: 3px;
padding-right: 3px;
}
.default.tabs ul.child:first-child li.child {
padding: 14px 0;
list-style-type: none;
display: table-cell;
color: #182e5b;
font-size: 16px;
min-width: 160px;
text-align: center;
cursor: pointer;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
我的任务是按以下方式在两个按钮之间换行:
我尝试更改display属性的值,但仍然无法在按钮之间产生换行符。
答案 0 :(得分:2)
将margin-bottom属性添加到第一个按钮
答案 1 :(得分:0)
您可以在第一个按钮中添加margin-bottom属性,例如:
button1 { margin-bottom: 5px; }
您可能还需要添加display: block
以及span
标签,因为内嵌和内联元素不受顶部/底部边距的影响。
答案 2 :(得分:0)
首先,如果你想使用media queries
,你应该使用括号,如下所示:
@media screen and (max-width: 767px) and (min-width: 320px){
/*CSS here*/
}
这里有fiddle,其中包含您需要的基本思路,您可以使用margin
进行检查