CSS中的文字差距

Question

我正在尝试在<li>标记下插入文字。我做了一些弯曲的背景。现在我的文本正在走出国界。

Link to Image

现在我希望文本居中，并从开头到结尾从背景中留出一些空白。我想要一个动态背景，以便它可以将其宽度设置为文本大小，并在开头和结尾提供更多空间。

你能告诉我怎么做吗？这是我的HTML和CSS代码：

.din{
    display: inline;
    border-radius: 15px 15px 15px 15px;
    background-color:#7c7779;
    text-align:center;
    color: #f8d8a9;
    width: 100px;
}

<ul class="date">
    <li class="din">
        মংলবার
    </li>
</ul>

Answer 1

将padding: 5px;添加到您的css。

.din {
    display: inline;
    border-radius: 15px 15px 15px 15px;
    background-color:#7c7779;
    text-align:center;
    color: #f8d8a9;
    width: 100px;

    padding: 5px;
}

Here is the JSFiddle demo

Answer 2

您可以为li添加填充。无论内容有多大，这种填充都将始终保持一致。请参阅代码段。

此外，li不接受宽度，因为它标记为内联。如果将display设置为inline-block，则会确认宽度。内联元素不能具有设置宽度。

听起来你希望内容/背景是动态的，所以你可能不想设置宽度但是不管怎样？

.date {
    margin:0;
    padding:0;
}

.din {
    display:inline;
    border-radius:15px;
    padding:5px 10px;
    background-color:#7c7779;
    text-align:center;
    color:#f8d8a9;
}

<ul class="date">
    <li class="din">
        মংলবার
    </li>
</ul>