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

Question

我正在创建一个包含小时和分钟的输入。我使用以下html元素：

• 两对向上和向下按钮；

• 输入文字。

我无法对齐html元素。 这是我可以应用的最佳对齐图像：

这是我的代码：

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

我尝试但没有成功，但通过向右拖动来排列元素。强制左对Buttons靠近html文本输入。

我更改了这段代码：

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

如何对齐html元素，使两对按钮都靠近文本的输入元素？

Answer 1

这将是flexbox的绝佳用例！以前，您在Bootstrap网格内放置了东西，这可能会增加您不需要的额外间距。对于自定义组件外观，您只需要按照所需的外观排列即可。现在，即使<input>的高度增加了，三角形也均匀地垂直间隔开了！

.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

如果您不想学习其他东西，例如flexbox，那么您真正需要做的就是稍微清理一下代码。在这种情况下，引导程序布局将使其变得更加困难。尝试简化成这样。这是我的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;
}