CODEWITHSUNDEEP
htmlcssbuttonuitextfield
Sowmya
Sowmya

Reputation: 26979

text field with attached button

How do I get the textfield and button attached to each other

Here is my demo http://jsfiddle.net/dgWqL/2/

Upvotes: 1

Views: 7269

Answers (2)

Simon Arnold
Simon Arnold

Reputation: 16177

You can do it this way : http://jsfiddle.net/dgWqL/2/
The key is using float

Suggestion:

  1. Do not use table for layout. (It is bad practice.)

  2. Write your CSS properties on separate lines. (Easier to read) and make it easier to
    avoid repeatition like you did with display: inline-block;

Hope this help.

Upvotes: 1

Paulo R.
Paulo R.

Reputation: 15609

You can simply remove the whitespace between #textfield" and input[type="button"]. (Whaaat?) Well, this is your html:

    <input type="text" name="textfield" id="textfield" value="Search here" />
    <input name="" type="button" value="Go">

This is the same as having...

    abc
    def

...which, as you'd never question, gets rendered as abc def.

It's the exact same thing.

As I've suggested you can simple delete that whitespace by putting the second input right in front of the first one in the html, as so...

    <input type="text" name="textfield" id="textfield" value="Search here" /><input name="" type="button" value="Go">

Another option is to comment out the whitespace - that's if you prefer to have each input on it's own line:

    <input type="text" name="textfield" id="textfield" value="Search here" /><!--
  --><input name="" type="button" value="Go">

Here's a fiddle - http://jsfiddle.net/dgWqL/3/

Upvotes: 2

Related Questions