html - 如何将这些 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>

我试过，但没有成功，通过向右拉来排列元素。强制左侧的一对按钮靠近 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 网格中有一些东西，这可能会增加您不想要的额外间距。对于自定义组件的外观，您只需要按照您希望的方式将它们隔开。现在三 Angular 形在垂直方向上均匀分布——即使 <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>