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

时间：2016-07-13 16:36:56

标签： html css twitter-bootstrap

我使用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>

我需要输入文字向左移动，远离右边框，更靠近＆＃34;搜索＆＃34;标签

我该如何做到这一点？

我也不知道为什么排太高，按钮太高 - 或者为什么按钮太高，使得排高......

使用的CSS是：

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

更新

现在的样子：

enter image description here

...用这个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，看起来或多或少＆＃34;好的＆＃34;但是我希望输入文本向左移动和/或标签向右移动，这样它们就会显得多一些＆＃34;舒适＆＃34;

2 个答案:

答案 0 :(得分：1)

<强> UPD 即可。下面的代码中有三行：

  1. 答案中的原始CSS。
  2. 将<label>移至右侧。
  3. 将<label>和<input>放在同一列中。

    4. 看起来像你需要的东西吗？

    ＆＃13;
    ＆＃13; 
    @import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css');

@media (min-width: 992px) {
  h2 {
    margin: 0;
    padding: 10px 0 0 0;
  }

  /* 1. */
  .shift-to-right {
    padding-right: 0;
    text-align: right;
  }

  /* 2. */
  .make-them-closer {
    padding-top: 13px;
  }
  .make-them-closer label {
    float: left;
    padding-right: 4px;
    padding-top: 3px;
  }
  .make-them-closer div {
    overflow: hidden;
  }
  .make-them-closer input {
    width: 100%;
  }
}

.squishedbutton {
  border: none;
  margin-left: 0cm;
  padding: 15px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 14px;
}
    ＆＃13; 
    <div class="container-fluid">
  <div class="row">
    <div class="col-md-12"><hr /></div>

    <div class="col-md-1">
      <h2>0.</h2>
    </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 class="col-md-12"><hr /></div>

    <div class="col-md-1">
      <h2>1.</h2>
    </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 shift-to-right">
      <label>Search:</label>
    </div>
    <div class="col-md-1">
      <input type="text" name="searchinput">
    </div>

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

    <div class="col-md-1">
      <h2>2.</h2>
    </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-2 make-them-closer">
      <label>Search:</label>
      <div><input type="text" name="searchinput"></div>
    </div>
    
    <div class="col-md-12"><hr /></div>
  </div>
</div>
    ＆＃13;
    ＆＃13;
    ＆＃13;

答案 1 :(得分：1)

＆＃13;
＆＃13; 
.squishedbutton {
  border: none;
  margin-left: 0cm;
  padding:0 15px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 14px;
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

如果您希望标签和文字位于按钮旁边，请将它们放在按钮之后。

相关问题
最新问题