2016-08-11 6 views
0

私はasp.netページに以下のようなコードがあります。アンカータグの埋め込み

<%@ Master Language="C#" AutoEventWireup="true" CodeFile="MasterPage.master.cs" Inherits="MasterPage" %> 

    <!DOCTYPE html> 

    <html xmlns="http://www.w3.org/1999/xhtml"> 

    <head runat="server"> 
    <title></title> 
    <asp:ContentPlaceHolder id="head" runat="server"> 
    </asp:ContentPlaceHolder> 
    <style> 
     body { 
     margin: 0px; 
     } 
     header, 
     footer { 
     background-color: black; 
     color: white; 
     padding: 20px; 
     text-align: center; 
     } 
     header { 
     position: fixed; 
     top: 0; 
     width: 100%; 
     } 
     header li { 
     display: inline-block; 
     border: 1px solid rgb(0, 153, 255); 
     background-color: dodgerblue; 
     } 
     header li:hover { 
     background-color: white; 
     } 
     header a { 
     text-decoration: none; 
     color: white; 
     padding: 15px; 
     } 
     header a:hover { 
     color: dodgerblue; 
     } 
    </style> 
    </head> 

    <body> 

    <form id="form1" runat="server"> 
     <div> 
     <header runat="server"> 
      <h1>Welcome to SAIC</h1> 
      <asp:Menu ID="MainMenu" runat="server" Orientation="Horizontal"> 
      <Items> 
       <asp:MenuItem Value="Home" NavigateUrl="~/Home.aspx"></asp:MenuItem> 
       <asp:MenuItem Value="Login" NavigateUrl="~/Login.aspx"></asp:MenuItem> 
       <asp:MenuItem Value="Add Products" NavigateUrl="~/Add Products.aspx"></asp:MenuItem> 
       <asp:MenuItem Value="View Product Details" NavigateUrl="~/View Product Details.aspx"></asp:MenuItem> 
      </Items> 
      </asp:Menu> 
     </header> 
     <asp:ContentPlaceHolder id="ContentPlaceHolder1" runat="server"> 

     </asp:ContentPlaceHolder> 
     </div> 
     <footer> 
     <p>Copyrights @ 2016</p> 
     </footer> 
    </form> 
    </body> 

    </html> 

アンカータグに埋め込みを適用しました。しかし、padding-toppadding-bottomだけが設定されています。左右のパディングは現れません。

padding: 15px 15px 15px 15px;を設定しようとしましたが、これも機能しません。

ここに生成されたソースがあります。 /* <![CDATA[ */が自動的に生成されています。 https://jsfiddle.net/q2Lcrgux/

+1

!あなたはいくつかのバイブルを投稿することができますか? –

+0

Asp.netはマスターページを処理し、メニュー項目はアンカータグに変換されます。ここで生成されたソースhttps://jsfiddle.net/q2Lcrgux/ –

+1

は私のためにうまく動作するokです! –

答えて

2

アンカータグはインライン要素です。パディングはインライン要素では機能しません。あなたはブロック要素としてそれを作らなければなりません。それらをインラインブロックにすることが必要です。 http://jsfiddle.net/LinkinTED/4d7q6gwp/

<a href="#" style="display:block;padding:10px">Click here</a> 

スタイル:私はあなたのコード内のアンカータグが表示されていない

a 
{ 
    display:inline-block; 
} 
0
a{ 
display:block; 
padding:15px; 
}//Use This Is inline Element That's Why You Need This Code Try It Once 
+1

このコードスニペットは質問を解決するかもしれませんが、[説明を含む](// meta.stackexchange.com/questions/114762/explaining-entirely-code-based-answers)本当にあなたの投稿の質を向上させるのに役立ちます。将来読者の質問に答えていることを覚えておいてください。そうした人々はあなたのコード提案の理由を知らないかもしれません。また、コードと説明の両方の可読性が低下するため、説明的なコメントを使用してコードを混乱させないようにしてください。 – FrankerZ

関連する問題