css，重新调整内联元素的大小以适应块宽度

Question

我需要在两个不同的div元素中对齐元素。

我的css

    div.details-box {      
        display:inline-block;
        *display:inline;
        width:850px;    
        margin-right:100px;
        margin-left:200px;
        margin-top:50px;
        border:1px solid #000;
        background:#eee;
        border-radius:5px;
        -moz-border-radius:5px; 
       direction:rtl;      
   }
   div.details-box div.row
   {
      display:block;    
      width:850px;
      margin:auto;
      margin-bottom:8px;            
      border:2px solid red;
      padding-right:150px;
   }
   div.details-box div.row div.inline-wraper
   {
      display:inline-block;   
      width:250px;
      border:1px solid blue;    
   }

我的HTML：

<div class="details-box">
   <div class="row"> 
       <div class="inline-wraper">
           <span> element 1 </span>
           <asp:TextBox ID="txt_pwd" runat="server" TextMode="Password"></asp:TextBox>   
       </div>
   </div>
   <div class="row"> 
       <div class="inline-wraper">
           <span> element 2 </span>
           <asp:TextBox ID="txt_pwd" runat="server" TextMode="Password"></asp:TextBox>   
       </div>
   </div>
</div>

2个未对齐的内联包装器的示例

我正在寻找一种方法来重新调整我的跨度，以便内联包装器可以“对齐”在彼此之上，或者采用一些不同的方法来存档，而不是使用填充 顶部的一个适合包裹的整个宽度（原因是它是一个重复出现的问题）。

我希望这很清楚 提前致谢 伊兰。

Answer 1

不确定我是否清楚地理解了您的问题。

无论如何，如果您不关心跨度的固定宽度，可以使用：

span {
   width: 90px;
   float: right;
}

如果固定宽度有问题，也许您可​​以使用<table>。