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

スタイルをコピーして、次の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 に答える
0

パディングは正常に機能します。スクリーンショットを添付するつもりでしたが、それを行うのに十分な評判ポイントがありません。パディングを左にすると、55pxでインデントされたテキストが表示され、青い背景は0から始まります。

h2領域全体をインデントする場合は、margin-left：55px;を使用する必要があります。

これがお役に立てば幸いです。

于 2012-07-19T14:49:41.567 に答える