How can I get my input text to move to the left up against the preceding label?


Tags: html,css,twitter-bootstrap

Problem :

I'm using bootstrap classes to arrange my page, and it was going fine until my latest row:

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

That row is preceded and followed by rows like this:

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

I need the input text to shift to the left, away from the right border, and closer to the "Search" label.

How can I accomplish this?

I also don't know why the row is so tall, making the buttons overly tall - or why the buttons are so tall, making the row tall...

The css used is:

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

UPDATE

This is how it looks now:

enter image description here

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

...and this css:

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

IOW, it looks more-or-less "okay" but I would like the input text shifted to the left and/or the label shifted to the right so that they appear a little more "cozy"



Solution :

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

and if you want label and text to come next to buttons then place them just after buttons.


    CSS Howto..

    How to give a div full height in CSS

    How do I reduce the vertical space between list items in an unordered list?

    how to get rid of the border-bottom by css?

    how to remove css property “element{}” [closed]

    How to refresh to top of HTML page using css

    How do I change a specific css element with javascript?

    How do you make an image or button glow when you mouse over using javascript or jquery?

    How to properly apply WinJS.Binding.Template ListView GridLayout CSS?

    How to re-size and crop an image client side while maintaining the aspect ratio

    How to set numerous links in a single line with CSS?

    How to make all the rows of a table the same height as the biggest one

    asp .net: how to change css on span tag in c#

    how to trim css code to just one line [closed]

    How to make gutter between columns in a CSS grid system

    How to write a CSS selector that works on nested divs and selects the closest match?

    how to effect td on fixed table layout

    selectCheckboxMenu: items are shown with bold font

    My sidebar is fixed no matter what. How do I make scrolling possible with the sidebar?

    Why doesn't this site have a Google logo for their use of Google Maps? I want to do this. How? [closed]

    How to change a form's CSS class without affecting FormController.$pristine?

    How do I center a Bootstrap div with a 'spanX' class?

    How to make transition effect on css sprite hover

    My Background image doesn't show up and is not inspected in the browser [closed]

    CSS HTML : stumped on how to center this piece of text

    How Can I Override Style Info from a CSS Class in the Body of a Page?

    How to change content of css using jQuery toggle

    Magento - how to locate the location of inline css

    How to display drop down menu with an arrow in the top using css?

    How to remove a css class and add another when I get a certain mobile resolution

    How to style Select2 input tags with css and how to limit them