如何将这些html元素连续对齐？

Question

I'm creating a input to contain hours and minutes.I use this html elements:

• Two pairs of up and down Buttons;

• Input text.

I'm having trouble aligning the html elements. This is the image with the best alignment I could apply:

This is my code:

 .col-centered{ float: none; margin: 0 auto; } .row-1{ padding-top: 3px; padding-right: 0px; padding-bottom: 1px; padding-left: 0px; } .triangle-up { width: 0; height: 0; border-left: 4px solid transparent; border-right: 4px solid transparent; border-bottom: 8px solid #555; } .triangle-down { width: 0; height: 0; border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 8px solid #555; } 

 <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <div class="container"> <div class="row"> <div class="col-xs-1"> <div class="row-1"> <div class = "triangle-up" id ="up1"></div> </div> <div class="row-1"> <div class = "triangle-down" id ="down1"></div> </div> </div> <div class="col-xs-2"> <div class = "col-centered"> <input type="text" id="hora" size="5" maxlength="5"> </div> </div> <div class="col-xs-1"> <div class="row-1"> <div class = "triangle-up" id ="up"></div> </div> <div class="row-1"> <div class = "triangle-down" id ="down"></div> </div> </div> </div> </div> 

I tried, but without success, lining up the elements with pulling to the right. Forcing the left pair of Buttons, to be near the html text entry.

I've changed this piece of code:

<div class="pull-right">
        <div class="row-1">
            <div class = "triangle-up" id ="up1"></div>
        </div>
        <div class="row-1">
            <div class = "triangle-down" id ="down1"></div>
        </div>
    </div>

How can I align the html elements so that the two pairs of buttons are close to the input element of text?

Answer 1

This would be a great use case for flexbox! Before, you had things inside the bootstrap grid, which was probably adding the extra spacing you didn't want. For a custom component look, you'd need to just space things out the way you want them to look. Now the triangles are spaced out evenly vertically - even if the height of the <input> is increased!

 .spinner-input-wrapper { display: flex; } .spinner { display: flex; flex-direction: column; justify-content: space-between; } .spinner-input { margin: 0 3px; } .triangle-up, .triangle-down { width: 0; height: 0; border: 4px solid transparent; } .triangle-up { border-bottom-width: 8px; border-bottom-color: #555; } .triangle-down { border-top-width: 8px; border-top-color: #555; } 

 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <div class="container"> <div class="spinner-input-wrapper"> <div class="spinner"> <div class="triangle-up" id="up1"></div> <div class="triangle-down" id="down1"></div> </div> <input type="text" class="spinner-input" size="5" maxlength="5"> <div class="spinner"> <div class="triangle-up" id="up2"></div> <div class="triangle-down" id="down2"></div> </div> </div> 

Answer 2

If you don't want to learn something else like flexbox all you really need is to clean up your code a bit. In this case the bootstrap layout is making it more difficult. Try simplifying to something like this. Here's my codepen sample

HTML

<div class="container">
  <div class="triangles">
    <div class="triangle-up" id="up1"></div>
    <div class="triangle-down" id="down1"></div>
  </div>
  <div class="input-text">
    <input type="text" id="hora" size="5" maxlength="5">
  </div>
  <div class="triangles">
    <div class="triangle-up" id="up1"></div>
    <div class="triangle-down" id="down1"></div>
  </div>
</div>

CSS

.triangle-up {
    margin-bottom: 6px;
    width: 0;
    height: 0;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-bottom: 8px solid #555;
}
.triangle-down {
    width: 0;
    height: 0;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 8px solid #555;
}

.triangles {
    float: left;
    display: inline-block;
    padding: 2px 5px;
}

.input-text {
    float: left;
    display: inline-block;
}