将h2容器放在父容器中

Question

我是CSS的新手，请原谅我的无知。我无法让我的h2标签在其容器内进行合作。我希望h2在周围的容器中左对齐，但我找不到正确的功能。 我的代码如下：

#about
    {
    width: 55%;
    font-size: 120%;
    }

h2
    {
    width: 130px;
    font-weight: lighter;
    border-style: solid;
    border-top: none;
    border-bottom: none; 
    border-left: none;
    border-width: 1px;  
    margin-top:7%;
    }

h2是文字＆＃34;关于＆＃34;和#about是下面的文本正文也包含h2。

截图

有什么建议吗？

根据要求：http://jsfiddle.net/N786d/

Answer 1

CodingAnt给出的选项会起作用，但它会导致右边的白色边框向右移动。 只需将margin-left设置为零就可以了。

h2 
    {
    margin-left: 0;
    }

Answer 2

修改

您应该提高CSS选择器的特异性，以便仅匹配导航栏的h2：

#nav h2{
    //Your actual rules
}

Demo

---

如果我理解你，你应该使用[text-align][2]属性，它可以包含以下值：

  

text-align：start |结束|离开|对|中心|辩解| match-parent |开始结束

在您的情况下，使用left值，您应该得到预期的结果！

Answer 3

将宽度更改为100％并设置文本左对齐，

text-align: left;    /*set text-align to left*/
width: 100%;        /*width change it to 100%*/

DEMO

Answer 4

通常您需要使用text-align:left，但这只会影响内嵌内容，因此您还必须为display:inline-block设置h2（默认情况下为display:block） ：

#about {
    ...
    text-align:left;
}

h2 {
   ...
   display:inline-block;
}

Fiddle demo