2

ASP.MVC2プロジェクトをテストするだけです。画像をご覧ください。 画像

関連するCSS：

/* TAB MENU   
----------------------------------------------------------*/
ul#menu
{
    border-bottom: 1px #5C87B2 solid;
    padding: 0 0 2px;

    margin: 0;
    text-align: right;
}

ul#menu li
{

   list-style: none;

 }

 ul#menu li a
{
    padding: 10px 20px;
    font-weight: bold;
    text-decoration: none;
    line-height: 2.8em;
    background-color: #e8eef4;
    color: #034af3;
}

 ul#menu li a:hover
 {
    background-color: #fff;
    text-decoration: none;
  }

  ul#menu li a:active
  {
    background-color: #a6e2a6;
    text-decoration: none;
  }

  ul#menu li.selected a
  {
     background-color: #fff;
    color: #000;
   }

水平から垂直に変換したいのですが、各ブロックを削除してテストしようとしましたが、運が悪かったです。

html：

<body>
<div class="page">

    <div id="header">


        <div id="logindisplay">
            <% Html.RenderPartial("LogOnUserControl"); %>
        </div> 

        <div id="menucontainer">

            <ul id="menu">              
                <li><%: Html.ActionLink("Home", "Index", "Home")%></li>
                <li><%: Html.ActionLink("About", "About", "Home")%></li>
            </ul>
         <div id="title">
            <h1>WSTEST</h1>
        </div>
        </div>
    </div>

    <div id="main">
        <asp:ContentPlaceHolder ID="MainContent" runat="server" />

        <div id="footer">
        </div>
    </div>
</div>

ありがとう。

4

2 に答える 2

2

これを試して：

ul#menu li {
    display: block;
    list-style: none;
}

元々はdisplay: inline、に変更するdisplay: block;と動作するはずです

それが役に立てば幸い！

于 2012-07-11T16:11:59.700 に答える
1

text-align：right;を削除してみてください。

水平メニューを作成する通常の方法であるため、コードにLI要素にフロートであることを通知するものが何もないことに驚いています。

どこか別の場所でLI要素にfloat：leftが追加されている可能性があります。

于 2012-07-11T15:59:03.813 に答える