div元素内三个相同大小的标题

Question

我想做一个div的布局，里面有3个标题大小一样！

我正在使用 angular materialize - 普通 html / css 也适用于我。

我试过了

<div>
 <label> Label 1 </label>
 <label> Label 2 </label>
 <label> Label 3 </label>
</div>

我附上了我需要的图片。

我应该在里面使用相同的 3 个 div 吗？或跨度/标签？

Answer 1

这是你需要的。

.tabs label {
    padding: 10px 20px;
    border-left: 1px solid #ccc;
    border-right: 0;
    float: left;
}
label.selected {
    background: #ccc;
}
.tabs label:first-child {
    border-left: 0;
}

.tabs {
    margin: 10px;
    display: inline-block;
    border: 1px solid #ccc;
    border-radius: 20px;
    overflow:hidden;
}

<div class="tabs">
 <label class="selected"> Label 1 </label>
 <label> Label 2 </label>
 <label> Label 3 </label>
</div>