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 中删除了两个text-align内联样式，并在底部附近添加了带有 class 的新 div 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 回答