如何在跨度内对齐文本

Question

有两个并排的跨度。第一个包含插入符，另一个包含文本。我正在尝试实现 pic1 中的文本对齐，但我得到的是 pic2。这可以通过使用 table 而不是我知道的 ul li 来实现，但是 css

还有其他方法吗

<ul>
 <li>
  <span><b class="right-caret"></b></span>
  <span>
   Click <a href="#">here</a> to know how to provide the feedback.
  </span>
 </li>
 <li>
  <span><b class="right-caret"></b></span>
  <span>
    Unable to Login or use the feedback form?
    Please report it <a href="#">here</a>.
  </span>
  </li>
</ul>

图一：

图二：

http://jsfiddle.net/hc6kajv2/

Answer 1

用这个代替 span With bullet , Without bullet

li:before { 
content: "";
border-color: transparent red;
border-style: solid;
border-width: 0.35em 0 0.35em 0.45em;
display: block;
height: 0;
width: 0;
left: -1em;
top: 0.9em;
position: relative;
}

编辑

你有一个margin-left清除它

http://jsfiddle.net/hc6kajv2/2/

Answer 2

一个简单（也许不优雅）的解决方案是将 lis 设置为 position: relative 并将箭头设置为 position: absolute:

.right-caret {
  position: absolute;
  left: -15px;
  top: 5px;
  border-bottom: 4px solid transparent;
  border-top: 4px solid transparent;
  border-left: 4px solid red;
  display: inline-block;
  height: 0;
}

FIDDLE

如何在跨度内对齐文本

How to align text in a span

html

css

编辑