2

私の要件は、左側に 2 つのリンクがあり、リンクをクリックすると、それぞれのページが右側に表示されることです。タグを使用してこの配置を行う方法。以下のようにしてみましたが、並べて表示されません。DisplayData はリンクの下部に表示されます。前もって感謝します..

<div id="accountstabs-1">
     <div id="links" style="text-align:left">
         <li><a href="#DisplayData" id="settings1" onclick="manage(this.id)">Manage</a></li>
         <li><a href="#DisplayData-2" id="settings2" onclick="manage(this.id)">Users</a></li>
     </div>
     <div id="DisplayData" style="text-align:right">
         <table class="data">
              <thead>
                <tr> 
                  <th>
                    First Name
                  </th>
                  <th>
                    Last Name
                  </th>
                </tr>
              </thead>
         </table>
     </div>
</div>
4

4 に答える 4

4

CSS:

#accountstabs-1>div {
    float : left;
}

http://jsfiddle.net/T4E88/

于 2012-08-29T05:00:25.527 に答える
0

text-align要素を配置する代わりに、フロートを使用する必要があります。(text-alignテキストのみに使用してください。)

この JSFiddle の例を確認してください。

HTML を次のように更新しました。

<div id="accountstabs-1">
    <div id="links" >
        <li><a href="#DisplayData" id="settings1" onclick="manage(this.id)">Manage</a></li>
        <li><a href="#DisplayData-2" id="settings2" onclick="manage(this.id)">Users</a></li>
     </div>
     <div id="DisplayData" >
         <table class="data">
              <thead>
                <tr> 
                  <th>First Name</th>
                  <th>Last Name</th>
                </tr>
              </thead>
         </table>
     </div>
    <div class="clr"></div>
</div>​

div から2 つのインライン スタイルを削除しtext-align、新しい div を下部近くに class で追加したことに注意してくださいclr。

次に、CSS は次のようになります。

#links {
    width: 50%;
    float: left;
}

#DisplayData {
    width: 50%;
    float: right;
}

/* clearfix */
.clr { clear: both; }

「clearfix」の目的は、右の列の後に追加された要素が列の下に正しく表示されるようにすることです。

于 2012-08-29T05:02:25.180 に答える
0

スタイルを別の CSS ファイルに配置する必要がありますが、次のように動作するはずです。

<div id="accountstabs-1" style="width:400px">
     <div id="links" style="display:block;float:left;width:200px">
         <li><a href="#DisplayData" id="settings1" onclick="manage(this.id)">Manage</a></li>
         <li><a href="#DisplayData-2" id="settings2" onclick="manage(this.id)">Users</a></li>
     </div>
     <div id="DisplayData" style="display:block;float:right;width:200px">
         <table class="data">
              <thead>
                <tr> 
                  <th>
                    First Name
                  </th>
                  <th>
                    Last Name
                  </th>
                </tr>
              </thead>
         </table>
     </div>
</div>
于 2012-08-29T05:02:43.660 に答える
0

div はブロック要素であり、全体を水平に配置します。別の div を並列に配置するには、css プロパティ float left を使用する必要があります。スタイル プロパティを使用しますstyle="float:left"。

<div id="accountstabs-1"> <div id="links" style="text-align:left; float:left"> <li><a href="#DisplayData" id="settings1" onclick="manage(this.id)">Manage</a></li> <li><a href="#DisplayData-2" id="settings2" onclick="manage(this.id)">Users</a></li> </div> <div id="DisplayData" style="text-align:right"> <table class="data"> <thead> <tr> <th> First Name </th> <th> Last Name </th> </tr> </thead> </table> </div> </div>

于 2012-08-29T05:06:58.857 に答える