Question

我有一个扩展列表，最初只显示一个标题，但如果点击它，它会显示描述。我觉得列表需要某种图像来帮助说明它需要点击才能显示更多内容。话虽如此，我添加了一个加号----请注释，如果一个不同的图标对于这种情况会更好----。

我觉得标题太靠近加号，所以如何在加号和标题之间添加填充？我已经为标题添加了填充，所以我不确定该怎么做。

这可以在我的网站上看到：

我的代码是：

.service_wrapper {
    border: 1px solid black;
    margin: 15px;
    width: 20%;
}
.service_list {
    margin-left: 20%;
}   
.service_title {
    padding: 15px 12px;
    margin: 0;
    font-weight: bold;
    font-size: 1em;
}
.service_title:hover {
    background-color: gray;
    color: blue;
    cursor: pointer;
}
.service_description { 
    display: none;
    padding: 8px 14px;
    width: 100%;
    margin-top: 10px;
    font-size: .9em;
}

<div class="service_list">
    <div class="service_wrapper">
         <div class="service_title"><img src="icons/plusSymbol.png" alt="Service" style="width:10px;height:10px;">Floors</div>
    <div class="service_description">The best floors!</div>
</div>

Answer 1

在下面的图像中给出填充，并在滑动和加号（+）时分别使用减号（ - ）。

.service_title img {
padding-right:10px;
}

jsfiddle link chick here

在图像和文本之间添加填充

1 个答案: