如何对齐跨度中的文本

Question

有两个并排的跨度。第一个包含插入符号，另一个包含文本。 我试图在pic1中实现文本对齐，但我得到的是pic2。 这可以通过使用表而不是我知道的ul来实现，但是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>

图1：

图2：

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

一个简单（可能不优雅）的解决方案是将li设置为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