0

我有一个 MVC2 应用程序测试应用程序。母版页代码的结构如下：

<div id="mainContainer"> 
    <asp:ContentPlaceHolder ID="leftColPlaceHolder" runat="server"> 
        <div id="leftcolumn"> 
            <div class="links"> 
                <div class="padding_left"> 
                    blah blah 
                </div> 
            </div> 
            <div class="innertube"> 
              blah blah 
            </div> 
        </div> 
    </asp:ContentPlaceHolder> 
    <asp:ContentPlaceHolder ID="MainContent" runat="server"> 
        <div id="contentwrapper"> 
            <div id="contentcolumn"> 
               blah blah                </div> 
        </div> 
    </asp:ContentPlaceHolder> 
</div>

在视图 index.aspx 中，代码

<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server"> 
<h2><%: ViewData["Message"] %></h2> 
<p> 
    To learn more about ASP.NET MVC visit <a href="http://asp.net/mvc" title="ASP.NET MVC Website">http://asp.net/mvc</a>. 
</p>

我想将 h2 部分填充留在左边，但它根本不起作用。请看我的CSS：

#maincontainer{
width: 840px; /*Width of main container*/
margin: 0 auto; /*Center container on page*/
}

#topsection{
background: #EAEAEA;
height: 90px; /*Height of top section*/
}

#topsection h1{
margin: 0;
padding-top: 15px;
}

#contentwrapper{
float: left;
width: 100%;
}

#contentcolumn{
margin-left: 300px; /*Set left margin to LeftColumnWidth*/
}

#leftcolumn
{
    float: left;
    width: 300px; /*Width of left column*/
    background: #C8FC98;
}

#footer
{
    clear: left;
    width: 100%;
    background: #666699;
    color: #FFF;
    text-align: center;
    padding: 4px 0;
 }

  #footer a{
  color: #FFFF80;
  }

  .innertube{
  /*Margins for inner DIV inside each column (to provide padding)*/
    margin-top: 0;
   }

  .links
  {
      width: 300px;
      height: 541px; /* must be 541px to display full image */
      background-image: url('../../cross.jpg');
  } 

  h2
  {
      padding-left: 55px;
      background-color: #00FFFF;
  }

谢谢

4

2 回答 2

0

填充按应有的方式工作。我打算附上一个屏幕截图，但没有足够的声誉点来这样做。使用左边距，您会看到文本缩进 55 像素，蓝色背景将从 0 开始。

如果您希望整个 h2 区域缩进，那么您应该使用 margin-left: 55px;

我希望这有帮助！

于 2012-07-19T14:49:41.567 回答
0

我复制了样式并创建了一个 HTML 文件：

<h2><%: ViewData["Message"] %></h2> <p> To learn more about ASP.NET MVC visit <a href="http://asp.net/mvc" title="ASP.NET MVC Website">http://asp.net/mvc</a>. </p>

它似乎工作正常。如果您使用的是 Chrome 或 Firefox，请尝试右键单击文本并检查元素以检查是否已采用该样式。可能是您有多个用于不同类的 h2 样式。通过更改 css 属性并跟踪页面上的更改来找到正确的 h2。当你找到正确的一个去同一行的 css 文件来更正样式。

作为一个非常快速的解决方案（虽然不是一个好习惯），您可以将您的 h2 标签更改为：

<h2 style="padding-left: 55px;"></h2>

希望这可以帮助。

于 2012-07-19T14:08:32.677 回答