样式宽度on :: before div

Question

我需要一些帮助来设置我的标题样式。我在这里有一个关于css反增量的问题css counter-increment unwanted reset when skipping :before我让计数器工作，现在我的问题是样式，我希望它是这样的。

1.a标题1
10.a标题2

＆＃13;

＆＃13;

div.first:before
{
    width: auto;
    display: inline-block;
    content: '1.a.\00a0';
}
div.second:before
{
    width: auto;
    display: inline-block;
    content: '10.a.\00a0';
}

div.first {  
}
div.second {
}

h4.counter {
}

＆＃13;

<div class="first">
    <h4 class="counter">foo</h4>
</div>

<div class="second">
    <h4 class="counter">foo</h4>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

h元素是块级元素，因此它们覆盖100％宽度并清除两边。

您需要将显示从block更改为inline然后排成一行。

示例：

＆＃13;

＆＃13;

div.first:before
{
    width: auto;
    display: inline-block;
    content: '1.a.\00a0';
}
div.second:before
{
    width: auto;
    display: inline-block;
    content: '10.a.\00a0';
}

div.first {  
}
div.second {
}

h4.counter {
    display:inline
}

＆＃13;

<div class="first">
    <h4 class="counter">foo</h4>
</div>

<div class="second">
    <h4 class="counter">foo</h4>
</div>

＆＃13;

＆＃13;

＆＃13;

所以这个前面的答案是一个对齐的文本示例：Align list items with custom CSS content before bullets

Answer 2

请尝试以下操作： DEMO

<强> CSS：

div.first:before {
    display: inline-block;
    content:'1.a.\00a0';
}
div.second:before {
    display: inline-block;
    content:'10.a.\00a0';
}
div.first, div.second {
    display: block;
}
h4.counter {
    display: inline-block;
}

Answer 3

您可以将非常简单的小类添加到CSS文件中：

h4.counter{
    margin : -1.5% 0 0 3%;
    /*below seems to be hard-codednot so useful still can checkout:*/
    /*margin: -20px 0 0 35px;*/
}

它会像你想要的那样工作。 http://oi57.tinypic.com/23r8vfm.jpg