我有一系列的2个按钮,竖直排列。它的图片表示如下:
这些按钮的HTML代码如下:
我将使用以下CSS代码来设置单个按钮样式:
```css ``` 请注意,此处是空白的CSS代码块,您需要将所需的CSS样式放入其中。
我的任务是以以下方式在两个按钮之间添加换行符:
<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代码来设置单个按钮样式:
```css ``` 请注意,此处是空白的CSS代码块,您需要将所需的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属性的值,但仍然无法在按钮之间产生换行符。