CODEWITHSUNDEEP
css
CSnerd
CSnerd

Reputation: 2239

CSS display (cannot top valign)

Display problem You can see from the picture that the input(type=number) and button(rate) cannot top valign This is my code.. How can I fix this problem?

 <form class="formRate" action="/rate" method="post">
    <input type="hidden" name="contentid" value="<%= photo.id %>" />
    <input type="hidden" name="source" value="<%= photo.source %>" />
    <input type="number" name="score" min="1" max="5" style="width:30px;"/>
    <input type="button" class="btn btn-danger" value="Rate"/>
    </form>

Upvotes: 0

Views: 276

Answers (4)

Eric
Eric

Reputation: 419

It's hard to say without seeing the CSS, but try adding 

<style>
  form, input { 
    margin-top: 0;
    margin-bottom: 0;
    padding-top: 0;
    padding-bottom: 0;
  }
</style>

Upvotes: 0

TheFrozenOne
TheFrozenOne

Reputation: 1715

input { float: left; }

.formRate { overflow: auto; }

That should help.

Upvotes: 2

Marc
Marc

Reputation: 432

You can use that in your CSS : 

input {
  display: inline-block;
  vertical-align: middle;
}

Upvotes: 1

Grant Thomas
Grant Thomas

Reputation: 45068

You can try using the vertical-align CSS property, setting it to top.

There are nuances with using this property, to be sure, depending on the element types and whatnot; admittedly, though, I haven't memorised where and when you should use this, and I'm just happy enough when it works.

Upvotes: -1

Related Questions