Question

我有以下代码，它们在页面中像H3一样设置样式：

<asp:Panel ID="divSitMain" runat="server" ClientIDMode="Static">
    <div class="clsSitMain">
        <h3>Sites</h3>
        <div class="clsLBHolder">
            <asp:ListBox ID="lbSit" ClientIDMode="Static" runat="server"></asp:ListBox>
        </div>
    </div>
</asp:Panel>

显示以下内容：

enter image description here

我有另外一个类似的代码，我想添加一个+符号/图像供用户点击并执行操作，所以我将代码修改为：

<div id="divEntMain">
    <div class="clsEntMain">
        <!--<h3>Entities</h3>-->
        <div id="spnEntMainHdr">
            <span id="spnEntMainText">Entities</span>
            <span id="spnEntMainPlus">+</span>
        </div>
        <div class="clsLBHolder">
            <asp:ListBox ID="lbEnt" ClientIDMode="Static" runat="server"></asp:ListBox>
        </div>
    </div>
</div>

显示以下内容：

enter image description here

以上是两个代码的CSS：

#spnEntMainHdr
{
    background: #BC1C4A;
    border-radius: 10px 10px 0 0;
    padding: 13px 20px;
    margin: 0;
    padding: 0;
    width: 90%;
}
#spnEntMainText
{
    color: #fff;
    text-shadow: 0 -1px 1px rgba(0,0,0,0.7);
    font-size: 12px;
    text-align: left;
    text-transform: uppercase;
    float: left;
    background: #BC1C4A;
    border-radius: 10px 10px 0 0;
    padding: 13px 20px;
    margin: 0;
    padding: 0;
}
#spnEntMainPlus
{
    float: right;
}
.clsSitMain h3
{
    background: #DC522B;
    color: #fff;
    text-shadow: 0 -1px 1px rgba(0,0,0,0.7);
    border-radius: 10px 10px 0 0;
    padding: 13px 20px;
    font-size: 12px;
    text-align: left;
    text-transform: uppercase;
    margin: 0;
}
#divEntMain, #divSitMain
{
    width: 100%;
    text-align: center;
    padding: 0;
    margin: 0;
}
#lbEnt, #lbSit
{
    width: 100%;
    height: 140px;
    margin: 0;
    padding: 0;
}
.clsLBHolder
{
    padding: 0;
    margin: 0;
    background: #4800ff;
}
#lbEnt {
    color: #BC1C4A;
    font-weight: bold;
    font-size: small;
}
#lbSit
{
    color: #DC522B;
    font-weight: bold;
    font-size: small;
}

如何修复它以便我能够使用相同的填充将+符号/图像添加到标题的右侧？

更新的问题：

enter image description here

Answer 1

保持H3格式的最佳方法是使用H3。

    <h3 id="spnEntMainHdr">
        <span id="spnEntMainText">Entities</span>
        <span id="spnEntMainPlus">+</span>
    </h3>

Answer 2

因此，如果我理解正确的问题 - 您希望将您的跨度设置为适当的左右填充。

问题是 - 标签是内联显示的。例如 - a显示为块。因此，要么将跨度更改为div，要么设置display：block;对他们来说。

接下来的事情 - 在css中，你将父级#spnEntMainHdr的填充设置为＆＃34; 13px 20px＆＃34; 然后你把它们设置回0.为什么？

Here's我用你的代码做了一点小提琴。查看css和结果的变化。

#spnEntMainHdr
{
    background: #BC1C4A;
    border-radius: 10px 10px 0 0;
    padding: 13px 20px;
    /* margin: 0; */
    /* padding: 0; */
    width: 90%;
    height:20px;
}
#spnEntMainText
{
    color: #fff;
    text-shadow: 0 -1px 1px rgba(0,0,0,0.7);
    font-size: 12px;
    text-align: left;
    text-transform: uppercase;
    float: left;
    background: #BC1C4A;
    border-radius: 10px 10px 0 0;
    display:block;
    /* padding: 13px 20px; */
    /* margin: 0; */
    /* padding: 0; */
}
#spnEntMainPlus
{
    float: right;
    display:block;
}
.clsSitMain h3
{
    background: #DC522B;
    color: #fff;
    text-shadow: 0 -1px 1px rgba(0,0,0,0.7);
    border-radius: 10px 10px 0 0;
    padding: 13px 20px;
    font-size: 12px;
    text-align: left;
    text-transform: uppercase;
    margin: 0;
}
#divEntMain, #divSitMain
{
    width: 100%;
    text-align: center;
    padding: 0;
    margin: 0;
}
#lbEnt, #lbSit
{
    width: 100%;
    height: 140px;
    margin: 0;
    padding: 0;
}
.clsLBHolder
{
    padding: 0;
    margin: 0;
    background: #4800ff;
}
#lbEnt {
    color: #BC1C4A;
    font-weight: bold;
    font-size: small;
}
#lbSit
{
    color: #DC522B;
    font-weight: bold;
    font-size: small;
}

如何保持H3风格的格式

2 个答案: