Question

我有一个正常的段落：

HTML：

<p><span>[1]</span> list-type-1</p>
<p><span>[2]</span> list-type-2</p>
...
<p><span>[10]</span> list-type-3</p>

CSS：

span {
  text-align:right;
}

需要输出：

 [1] list-type-1
 [2] list-type-2
....
[10] list-type-10

但列表编号位于左侧。那么，如何修复右对齐。

提前致谢。

Answer 1

设置跨度的宽度，即：

SELECT r.`id`
FROM `rooms` r
RIGHT JOIN(
  SELECT a.roomId, a.date AS startdate, MIN( c.date ) AS enddate, DATEDIFF(MIN( c.date ), a.date)+1 AS nights
  FROM (
    SELECT r.id AS roomId, d.date AS date
    FROM dates AS d
    CROSS JOIN rooms AS r WHERE
    NOT EXISTS ( SELECT id, roomId
      FROM bookings AS b
      WHERE d.date BETWEEN b.start_date AND b.end_date
      AND r.Id = roomId )
    AND d.date BETWEEN :minArr1 AND :maxDept1
  ) AS a

  LEFT JOIN(
    SELECT r.id AS roomId, d.date AS date
    FROM dates AS d
    CROSS JOIN rooms AS r WHERE
    NOT EXISTS (
      SELECT id, roomId
      FROM bookings AS b
      WHERE d.date BETWEEN b.start_date AND b.end_date
      AND r.Id = roomId
    )
    AND d.date BETWEEN :minArr2 AND :maxDept2
  ) AS b
  ON a.date = b.date + 1 AND a.roomId = b.roomId

  LEFT JOIN (
    SELECT r.id AS roomId, d.date AS date
    FROM dates AS d
    CROSS JOIN rooms AS r WHERE
    NOT EXISTS (
      SELECT id, roomId FROM bookings AS b
      WHERE d.date BETWEEN b.start_date AND b.end_date
      AND r.Id = roomId
    )
    AND d.date BETWEEN :minArr3 AND :maxDept3
  ) AS c
  ON a.date <= c.date AND a.roomId = c.roomId

  LEFT JOIN (
    SELECT r.id AS roomId, d.date AS date
    FROM dates AS d
    CROSS JOIN rooms AS r WHERE
    NOT EXISTS (
      SELECT id, roomId
      FROM bookings AS b
      WHERE d.date BETWEEN b.start_date AND b.end_date
      AND r.Id = roomId
    )
    AND d.date BETWEEN :minArr4 AND :maxDept4
  )AS d ON c.date = d.date - 1 AND c.roomId = d.roomId

  WHERE b.date IS NULL
  AND c.date IS NOT NULL
  AND d.date IS NULL
  GROUP BY a.date, a.roomId
)AS results
on results.roomId = r.Id
WHERE nights >= :n

http://jsfiddle.net/hedgehog34/50tp475k/

Answer 2

像这样修改你的CSS

span {
    text-align:right;
    float:right;   // This style is responsible to put your list numbers on right side in your case
}

见小提琴：https://jsfiddle.net/5mmgu9dk/

Answer 3

替代

＆＃13;

p{
    padding-left: 35px;
    position: relative;
}
span {
    text-align: right;
    position: absolute; top: 0; left: 0;
    width: 30px;
}

＆＃13;

<p><span>[1]</span> list-type-1</p>
<p><span>[2]</span> list-type-2</p>
<p><span>[23]</span> list-type-23</p>
<p><span>[10]</span> list-type-3</p>

＆＃13;

需要在列表编号中右对齐而不使用ol标记

3 个答案: