将div与列表对齐

我花了好几天的时间试图找到我的问题的解决方案。将div与列表对齐

我想对齐或到我的表的特定列。

例如，对于my sample：

<table border="1" > 
    <tr> 
     <td>1.1</td> 
     <td>1.2</td> 
     <td>1.3</td> 
    </tr> 
    <tr> 
     <td>2.1</td> 
     <td>2.2</td> 
     <td>2.3</td> 
    </tr> 
</table> 
<div>Test</div>

我想对齐2.2单元下面我的测试。

我正在使用Jquery。

你有什么想法吗？

来源

2014-04-25 tripless

你可以尝试以下fiddle

$(document).ready(function(){ 
    var position = $("#test").position(); 

    $("div").css({ 
    "left": position.left 
    }); 
});

来源

2014-04-25 09:51:42 Sandeeproop

你需要用你的表和DIV，然后定义宽度和文本对齐：

<div class="wrap"> 
<table border="1" > 
    <tr> 
     <td>1.1</td> 
     <td>1.2</td> 
     <td>1.3</td> 
    </tr> 
    <tr> 
     <td>2.1</td> 
     <td>2.2</td> 
     <td>2.3</td> 
    </tr> 
</table> 
<div>Test</div> 
</div>

demo

来源

2014-04-25 09:29:10

或者他可以给这两个同名的名字。 – Aashray

是的，但它很好包裹他们没有混淆... –

@downvoter我可以知道为什么downvoted？ –

DEMO 1http://jsfiddle.net/YrHXF/（使用CSS只）

如果你不想在CSS中增加宽度使用jquery
DEMO 2http://jsfiddle.net/4Nzfr/

div,table{ 
    text-align:center; 
    width:100px; 
}

来源

2014-04-25 09:32:23

为什么你是否将宽度设置为100px？如果表格数据变化会发生什么 – Tuhin

这是一个粗略的数字。它可以根据需要改变。 –

acha他。但我的解决方案如何？它不会取决于数据的大小 – Tuhin

只需使用<center>标记。为什么你不需要额外的代码？ :)

<center>  
     <table border="1" > 
      <tr> 
       <td>1.1</td> 
       <td>1.2</td> 
       <td>1.3</td> 
      </tr> 
      <tr> 
       <td>2.1</td> 
       <td>2.2</td> 
       <td>2.3</td> 
      </tr> 
     </table> 
     <div>Test</div> 
    </center>

或

<div class="container"> 
    <table border="1" > 
     <tr> 
      <td>1.1</td> 
      <td>1.2</td> 
      <td>1.3</td> 
     </tr> 
     <tr> 
      <td>2.1</td> 
      <td>2.2</td> 
      <td>2.3</td> 
     </tr> 
    </table> 
    <div>Test</div> 
</div> 

.container{ 
    text-align:center; 
    display:table; 
}

来源

2014-04-25 09:37:55 Tuhin

标记已折旧............ – Friend

请设置样式在相应的CSS，或使用如u请:)

<div style="width:200px;"> 
    <table border="1" style="width:100%" > 
     <tr> 
      <td>1.1</td> 
      <td>1.2</td> 
      <td>1.3</td> 
     </tr> 
     <tr> 
      <td>2.1</td> 
      <td>2.2</td> 
      <td>2.3</td> 
     </tr> 
    </table> 
    <div style="text-align:center;">Test</div> 
    </div>

来源

2014-04-25 09:49:56 WickStargazer

将div与列表对齐

回答

相关问题