CSS中的文本间隙答案

【问题标题】：text gap in CSSCSS中的文本间隙
【发布时间】：2015-11-09 19:33:28
【问题描述】：

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

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

你能告诉我怎么做吗？这是我的 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>

【问题讨论】：

我认为
不接受宽度。您需要确保将宽度应用于
标记。 stackoverflow.com/questions/2295311/... 这可能会对您有所帮助。

【解决方案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

【讨论】：

【解决方案2】：

您可以为 li 添加填充。无论内容有多大，此填充将始终保持一致。见 sn-p。

另外，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>

【讨论】：

我认为
不接受宽度。您需要确保将宽度应用于
标记。 stackoverflow.com/questions/2295311/…这可能会对你有所帮助。

对不起，我在这里添加了评论，而不是@question 张贴

显示：块；溢出：隐藏；向左飘浮;在你的 din 课上。您将能够删除宽度。向左浮动可能会导致此对象周围的对象出现一些不希望的渲染，但它们很容易修复。