CODEWITHSUNDEEP
htmlcss
Hidalgo
Hidalgo

Reputation: 941

Show input right after label

I need to show (within a div tag) a label and right next to the label an input. I am using bootstrap css and my code is as follows:

<div class="row">
    <div class="span3">
        <div class="control-group">
             <label class="control-label" for="txtInput">Enter Text:</label>
                 <div class="controls">
                       <input id="txtId" class="input-medium" name="txtInput" />
                 </div>
        </div>
     </div>
</div>

No matter what I do there is a space between the label ("Enter Text:") and the left margin of Input.

How do I change the HTML or CSS to accomplish this? TIA

Upvotes: 1

Views: 886

Answers (3)

Eric Beaulieu
Eric Beaulieu

Reputation: 1064

You could put a negative margin on input-medium to force it to be closer to the label:

    div.controls {
        display:inline;
    }
    .input-medium {
        margin-left:-4px;
    }

Upvotes: 1

framauro13
framauro13

Reputation: 797

Try removing any whitespace between the elements. For example:

<label class="control-label" for="txtInput">Enter Text:</label><div class="controls"><input id="txtId" class="input-medium" name="txtInput" /></div>

Then, just remove the margin or padding of the div or input, if you want them to be placed right next to each other. The whitespace between them is rendered, so you'll have to remove it. Another approach I've seen is (but never used) is to put an HTML comment between the elements instead, like this:

<label class="control-label" for="txtInput">Enter Text:</label><!--
--><div class="controls"><!--
       --><input id="txtId" class="input-medium" name="txtInput" />
   </div>

See if either of those help. I recently ran into this problem where I was getting unexpected whitespace between my labels and inputs, and I couldn't remove it without using negative margin, which I didn't like. The solution I found was to remove the whitespace as in the first example. It doesn't look too pretty in the code, but it works.

Good luck!

Upvotes: 1

Devon Bernard
Devon Bernard

Reputation: 2300

To adjust the position of only your input field you should be able to just apply the "position" CSS property of that element. Once you set that "position" property as relative you can move the element's position relative to its initial starting location using top,bottom,left, and right.

In the below example I moved your input field 5 pixels to the left of where it normally would be.

<style>
  .controls{
    position:relative;
    left:-5px;
  }
</style>

Upvotes: 1

Related Questions