Question

使用dataTables，我有一个响应表，在子行中生成以下HTML

dtr-data

使用CSS，我希望每个li（{{1}}）中的第二个跨度使文本与右侧对齐。这可能在CSS中而不必修改DOM以将span放在div标签中吗？理想情况下，我不想创建自己的自定义渲染，因此只能通过CSS对齐跨度文本是理想的

Answer 1

你可以使用flexbox。

这会重置li display属性，从而删除项目符号点，因此您需要重新引入它。

示例：

li {
  display: flex;
  margin-left: -1em;
}

li:before {
  content: '•';
  padding-right: .5em;
}

.dtr-data {
  margin-left: auto;
}

<ul data-dtr-index="0" class="dtr-details">
  <li data-dtr-index="0" data-dt-row="0" data-dt-column="0">
    <span class="dtr-title">Pay No</span>
    <span class="dtr-data">999</span>
  </li>
  <li data-dtr-index="3" data-dt-row="0" data-dt-column="3">
    <span class="dtr-title">DOB</span>
    <span class="dtr-data">14 Sep 1951</span>
  </li>
</ul>

Answer 2

你可以使li相对，并且跨度绝对正确：0px。（或使用浮动：右）

li {
    position: relative;
}

li span:nth-child(2){
    position: absolute;
    right: 0px;
}

Answer 3

方法1

float有问题的嵌套元素（.dtr-data）。

代码段示范：

＆＃13;

.dtr-data {
    float: right;
}

li {
    max-width: 300px; /* for the sake of demonstration */ 
    clear: both; /* clear floats for good measure */
}

＆＃13;

<ul data-dtr-index="0" class="dtr-details">
   <li data-dtr-index="0" data-dt-row="0" data-dt-column="0">
      <span class="dtr-title">Pay No</span> 
      <span class="dtr-data">999</span>
   </li>
   <li data-dtr-index="3" data-dt-row="0" data-dt-column="3">
      <span class="dtr-title">DOB</span> 
      <span class="dtr-data">14 Sep 1951</span>
   </li>
</ul>

＆＃13;

方法2

float嵌套的同级元素（.dtr-title）并在包含父级的地方声明text-align。

代码段示范：

＆＃13;

.dtr-title {
    float: left;
}

li {
    max-width: 300px; /* for the sake of demonstration */ 
    clear: both; /* clear floats for good measure */
    text-align: right;
}

＆＃13;

<ul data-dtr-index="0" class="dtr-details">
   <li data-dtr-index="0" data-dt-row="0" data-dt-column="0">
      <span class="dtr-title">Pay No</span> 
      <span class="dtr-data">999</span>
   </li>
   <li data-dtr-index="3" data-dt-row="0" data-dt-column="3">
      <span class="dtr-title">DOB</span> 
      <span class="dtr-data">14 Sep 1951</span>
   </li>
</ul>

＆＃13;

方法3

在包含的父元素上声明flex，并相应地与justify-content属性对齐。

代码段示范：

＆＃13;

li {
    max-width: 300px; /* for the sake of demonstration */ 
    display: flex; /* required for following property to apply */
    justify-content: space-between; /* to align end-to-end */
}

＆＃13;

<ul data-dtr-index="0" class="dtr-details">
   <li data-dtr-index="0" data-dt-row="0" data-dt-column="0">
      <span class="dtr-title">Pay No</span> 
      <span class="dtr-data">999</span>
   </li>
   <li data-dtr-index="3" data-dt-row="0" data-dt-column="3">
      <span class="dtr-title">DOB</span> 
      <span class="dtr-data">14 Sep 1951</span>
   </li>
</ul>

＆＃13;

关于flex-box的说明：
由于flex-box仅限于不支持旧版浏览器（如I.E）以获得完整的浏览器支持和兼容性，请参阅上述任一备选方案。

请参阅浏览器兼容性：

caniuse.com
flex - CSS | MDN

方法4

position有问题的嵌套元素（.dtr-data）为absolute并通过声明right属性值来偏移对齐，在包含上声明relative定位父元素，以便绝对嵌套的子元素相对于其父元素定位 注意：此解决方案很可能需要进行响应式调整

代码段示范：

＆＃13;

li {
    max-width: 300px; /* for the sake of demonstration */ 
    position: relative; /* required */
}

.dtr-data {
    position: absolute;
    right: 0;
}

＆＃13;

<ul data-dtr-index="0" class="dtr-details">
   <li data-dtr-index="0" data-dt-row="0" data-dt-column="0">
      <span class="dtr-title">Pay No</span> 
      <span class="dtr-data">999</span>
   </li>
   <li data-dtr-index="3" data-dt-row="0" data-dt-column="3">
      <span class="dtr-title">DOB</span> 
      <span class="dtr-data">14 Sep 1951</span>
   </li>
</ul>

＆＃13;

在li元素中对齐span文本

3 个答案:

方法1

方法2

方法3

方法4