Question

这应该相当简单，但在尝试了Google和其他Stack Overflow问题的大量解决方案后，我仍然没有找到解决方案。我在rails项目中有一个html.erb部分：

<div class="resource-body">
  <div class="arrow-up"></div>
  <h4><a href="<%= resource.url %>"><%= resource.title %></a></h4>
  <div class="resource-section-id">
    <span hidden><%=resource.section_id%></span>
  </div>
</div>

和相应的CSS：

.resource-body{
  padding-left: 20vw;
  margin: 0;
}

.arrow-up {
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  margin: 0;
  border-bottom: 5px solid black;
}

箭头显示在网址上方。我正试图让箭头立即在链接的左边。我已经尝试过通常的嫌疑人，如显示：内联等，但没有骰子。有什么想法吗？

Answer 1

这里我修改了css并在.arrow-up类中添加了两个属性

  float: left;
  padding-top: 6px;

以下是link to fiddle

Answer 2

    .arrow-up {
    width: 0;
    height: 0;
  border-left: 5px solid transparent;
 border-right: 5px solid transparent;
   margin: 0;
   border-bottom: 5px solid black;
position: relative;
top: 33px;
  left: -18px;
}

Answer 3

让它变得简单!!!!!

只需将此规则添加到您的css：

h4 a {float:left;}

享受它!!!

删除html元素之间的自动间距/换行符？

3 个答案: