CODEWITHSUNDEEP
htmlcssruby-on-rails
Sciguy77
Sciguy77

Reputation: 349

Remove automatic spacing/line breaks between html elements?

This should be fairly simple, but after trying a lot of solutions from Google and other Stack Overflow questions I still haven't found a solution. I have a html.erb partial in a rails project:

<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>

And the corresponding 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;
}

The arrow appears above the URL. I'm trying to get the arrow to be immediately to the left of the link. I've tried the usual suspects like display: inline, etc. but no dice. Any ideas?

Upvotes: 1

Views: 766

Answers (3)

Hardik
Hardik

Reputation: 3895

Here I have modified the css and added two properties in .arrow-up class

  float: left;
  padding-top: 6px;

Here is the link to fiddle

Upvotes: 2

Luiggi
Luiggi

Reputation: 368

Make it easy!!!!!

just add this rules to your css:

h4 a {float:left;}

Enjoy it!!!

Upvotes: 1

user3218194
user3218194

Reputation: 458

    .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;
}

Upvotes: 1

Related Questions