在li元素中对齐span文本

时间:2017-11-30 11:34:15

标签: html css

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

dtr-data

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

3 个答案:

答案 0 :(得分: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>

答案 1 :(得分:0)

你可以使li相对,并且跨度绝对正确:0px。 (或使用浮动:右)

li {
    position: relative;
}

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

答案 2 :(得分:0)

方法1

float有问题的嵌套元素(.dtr-data)。

代码段示范:

&#13;
&#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;
&#13;
&#13;

方法2

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

代码段示范:

&#13;
&#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;
&#13;
&#13;

方法3

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

代码段示范:

&#13;
&#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;
&#13;
&#13;

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

请参阅浏览器兼容性:

  1. caniuse.com
  2. flex - CSS | MDN
  3. 方法4

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

    代码段示范:

    &#13;
    &#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;
    &#13;
    &#13;