html - 如何让我的输入文本向左移动到前面的标签上？

Question

我正在使用 Bootstrap 类来安排我的页面，并且在我的最新行之前一切正常:

@* row 7: Copy, Excel, CSV, and PDF buttons  *@
<div class="row">
    <div class="col-md-1">
    </div>
    <div class="col-md-8">
        <button type="button" class="squishedbutton">Copy</button>
        <button type="button" class="squishedbutton">Excel</button>
        <button type="button" class="squishedbutton">CSV</button>
        <button type="button" class="squishedbutton">PDF</button>
    </div>
    <div class="col-md-1">
        <label style="text-align: right;">Search:</label>
    </div>
    <div class="col-md-1">
        <input type="text" style="margin-right: 2cm;" name="searchinput">
    </div>
    <div class="col-md-1">
    </div>
</div>

该行之前和之后是这样的行:

<div class="row">
    <div class="col-md-12">
        <hr />
    </div>
</div>

我需要将输入文本向左移动，远离右边框，并更靠近“搜索”标签。

我怎样才能做到这一点？

我也不知道为什么该行如此之高，使按钮过高 - 或者为什么按钮如此之高，使该行如此之高...

使用的css是:

.squishedbutton {
  border: none;
  margin-left: 0cm;
  padding: 15px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 14px;
}

更新

现在是这样的:

...用这个 html:

<div class="row">
    <div class="col-md-1">
    </div>
    <div class="col-md-7">
        <button type="button" class="squishedbutton">Copy</button>
        <button type="button" class="squishedbutton">Excel</button>
        <button type="button" class="squishedbutton">CSV</button>
        <button type="button" class="squishedbutton">PDF</button>
    </div>
    <div class="col-md-1">
        <label style="text-align: right; display: inline-block;">Search:</label>
    </div>
    <div class="col-md-1">
        <input type="text" style="margin-right: 2cm;" name="searchinput">
    </div>
</div>

...还有这个 CSS:

.squishedbutton {
  margin-left: 0cm;
  margin-right: -0.1cm;
  padding: 4px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 14px;
}

IOW，它看起来或多或少“还可以”，但我希望输入文本向左移动和/或标签向右移动，以便它们看起来更“舒适”

Answer 1

.squishedbutton {
  border: none;
  margin-left: 0cm;
  padding:0 15px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 14px;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<style>
  hr{ margin:0;}
 </style>

<div class="container">
		<div class="row">
			<div class="col-md-12">
				<hr />
			</div>
		</div>
		<div class="row">
			<div class="col-md-12">
				<hr />
			</div>
		</div>
		<div class="row">
			<div class="col-md-1">
			</div>
			<div class="col-md-7">
				<button type="button" class="squishedbutton">Copy</button>
				<button type="button" class="squishedbutton">Excel</button>
				<button type="button" class="squishedbutton">CSV</button>
				<button type="button" class="squishedbutton">PDF</button>
			</div>
			<div class="col-md-3 ">
				<form class="form-inline">
					<div class="form-group">
						<label for="exampleInputName2">Search</label>
						<input type="text" class="" id="exampleInputName2" placeholder="">
					</div>
					
				</form>
			</div>
			<div class="col-md-1">
			</div>
		</div>
		<div class="row">
			<div class="col-md-12">
				<hr />
			</div>
		</div>
		<div class="row">
			<div class="col-md-12">
				<hr />
			</div>
		</div>
	</div>

如果您希望标签和文本出现在按钮旁边，请将它们放在按钮之后。