1

水平メニュー/リストを作成しようとしています。独立したボタンと、独自の個別のフォームに包まれたボタンが混在しています。

多くのハッキングで、フォーム内とフォーム内ではなく、すべてのボタンを水平方向に配置しました。

ただし、全体をページの中央に配置することはできませんでした。

誰かが私が見ていないことを指摘してもらえますか?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
    <link rel="shortcut icon" href="http://localhost:7001/nsd/images/favicon.ico">
    <style type = "text/css">
        #horizontal_li_menu
        {
            margin:0 auto;
            text-align:center;
            border: 1px solid green;
            width:750px;
            list-style-type: none;
            text-decoration: none;
            padding:0 auto;
        }

        #horizontal_li_menu li 
        { 
            display: inline;
            float:left;
            padding-right: 10px;

         }

    </style>

</head>

    <body>







<ul id = "horizontal_li_menu">
    <li>
        <input value="Update" onclick="location.href='#'" name="button" type="button"/>
    </li>

    <li>
        <form name="formExportVECI" method="post" action="exportveci">
            <input name="person_id" value="661774" type="hidden">
            <input name="submitExport" value="Export To Microsoft Excel" type="submit">
        </form>

    </li>  
    <li>
        <form id="ufdh" name="formImportVECI" action="importveci" method="post" enctype="multipart/form-data">
                <input name="person_id" value="661774" type="hidden">
                <input value="Import From Microsoft Excel" path="Upload" type="submit">
                <input id="fileData" name="fileData" value="" type="file">
        </form>
    </li>

    <li>
        <input value="Search/Home" onclick="location.href='search'" name="buttonHome" type="button"/>
    </li>
    </ul>






</body></html>
4

2 に答える 2

0

ページまたは別の要素内でブロック要素を水平方向に中央揃えするには

使用する 

 
   #element_id{margin: 0 auto;}

これにより、要素がコンテナの中心に配置されます。

したがって、リストをページの水平方向の中央に配置するには

上記のスタイルをulに適用し、 liには適用しません。
ところで、 id horizo ​​ntal_li_menu_containerの div に追加のコンテンツがない限り、冗長です。ulはそれがなくても完全に機能します。
うまくいかない場合は、次の点を確認してください。

  1. そのul内のすべてのliの幅、パディング、マージンの合計を求めます
  2. 合計がulの幅と等しいことを確認してください
  3. コンテナー div の幅が指定されていないか、既にページの中央に配置されていることを確認してください
これらがすべて当てはまる場合、上記のスタイルは機能します。

お役に立てれば。

于 2012-12-12T23:44:32.817 に答える
0

あなたのCSSによると：

#horizontal_li_menu_container ulhorizontal_li_menu_container_ul同じ要素を選択しています。あなたがこれを理解しているかどうかはわかりません。

また、float を使用する場合は、それらをクリアする必要があります。

于 2012-12-12T22:38:20.717 に答える