How do I get a button and a form element in the same line without a linebreak happening?
thank you very much!
<button>ask question</button>
<form action="/search" method="get">
<input type="text" name="q" value="{SearchQuery}"/>
<input type="submit" value="Search"/>
</form>
Use this CSS style: style="display: inline;" on your form.
<form action="/search" method="get" style="display: inline;">
Here's a demo on JSBin.
You could make the button a float:
<button style="float: left;">ask question</button>
both <button> and <form> are block level elements. you'd need to make them inline with CSS display: inline. not sure if that's what you mean. also it depends on your broader HTML.
Input fields are block-level elements. You can change the display rules in CSS:
input { display: inline; }
You can float: left both the button and the form
For adding new line after input box then add -> input { display: block; } in your css file
Related
on this page: http://growthbay.ch/
I have a small email field plus subscribe button embedded, but I would like to show the subscribe button right next to the email input field with a bit of a margin to the left of the subscribe button.
I am using this code:
<label><strong>Get the latest jobs in your inbox!</strong></label>
<input style="width:auto !important" type="email" name="EMAIL" placeholder="your#email.com" required />
<input display="inline-block" position="relative" margin-left="5px" vertical-align="top" type="submit" value="Subscribe" />
What am I doing wrong?
thanks folks!
Sandro
Try display: inline-block; instead of display:block from your css
I believe you missed display: inline-block on the email field. Just add it, and it should work!
Also (albeit not related to your problem), you did not apply styles to the "Subscribe" button in the correct way: what you have is
<input display="inline-block" position="relative" margin-left="5px" vertical-align="top" type="submit" value="Subscribe"/>
while it should be:
<input style="display: inline-block; position: relative; margin-left: 5px; vertical-align: top;" type="submit" value="Subscribe"/>
In general, however, I recommend using external CSS and referencing your element with classes.
Let me know if it worked!
I have the a textbox used as a search field as follows that I want to align to the right:
<div class="col-md-6 search-form" style="padding:13px 0;">
<form action="/search" method="post">
<input type="search" name="q" style="max-width: 300px;" class="form-control" placeholder="Search here...">
</form>
</div>
I tried surrounding it with another div to attempt to do so using text-align as shown below but it didn't align exactly where I want it
.new-search-div {
display: inline-block;
text-align: right;
}
Here's a screenshot of where I am trying to align it...
text-align:right; will only right align text elements.
It appears that your are using bootstrap. You could try giving your form a class of pull-right, which is a bootstrap class for float right.
<form action="/search" method="post" class="pull-right">
<input type="search" name="q" style="max-width: 300px;" class="form-control" placeholder="Search here...">
</form>
Don't use align:right;, there's no such CSS rule, use float:right; instead.
(The element will be aligned to the right of the parent element, so you might need to apply that on the parent form instead, if you don't see it changing.)
Already tried to give the Input a float: right; ?
I want to display textbox first and then button.But now button appears first.I attached css code and html
css
.search,.stxt{
float: right;
}
html
<form method="POST">
<p style="align:right;">
<input class="stxt" type="text" name="searchtxt"><a style="padding-right:2ex;"></a>
<button name="search" class="search">Search</button></p>
</form>
The nature of floats will prioritise the first element in the list. This is why your input text box is to the right.
I would recommend wrapping your elements within a div and having that float to the right instead.
Floating Elements Next to Each Other
If you place several floating elements after each other, they will float next to each other if there is room.
So add the same class for both elements like below
HTML:
<form method="POST">
<p style="align:right;">
<input class="stxt alignLeft" type="text" name="searchtxt"><a style="padding-right:2ex;"></a>
<button name="search alignLeft" class="search">Search</button></p>
</form>
And remove the float:right; in the .search,.stxt classes in CSS styles and add the following CSS:
.alignLeft{
float: left;
}
p{
margin-left: 290px;
}
Fiddle:http://jsfiddle.net/gvmtuo5j/1/
Alternative:
Try Like this:
.search,.stxt{
float: left;
}
p{
margin-left: 290px;
}
check out this fiddle:http://jsfiddle.net/gvmtuo5j/
Just move the button before your input text :
<form method="POST">
<p style="align:right;">
<button name="search" class="search">Search</button></p>
<input class="stxt" type="text" name="searchtxt"><a style="padding-right:2ex;"></a>
</form>
Or the simpliest way is to put the float right on your <p> tag and remove the others float right
i have my form and it looks like this
<form>
<fieldset>
name:textbox
lastname:textbox
address:textbox
</fieldset>
</form>
and i want my page to align its elements like
<form>
<fieldset>
name: textbox
lastname: textbox
address: textbox
</fieldset>
</form>
i am just using divs is there any other way to achieve this other than using tables?i need to align this elements to give my page a better navigation of inputs.
Use the table-related CSS display values to style block elements as though they were in a table:
display: table
display: table-row
display: table-cell
This will cause your block elements to behave as though they were <table>, <tr>, and <td> elements respectively.
Yes, it's possible just to use divs. Also, I'd use <input> so the user can actually type something in for your inputs.
HTML
<div>
name: <input type="text" />
lastname: <input type="text" />
address: <input type="text" />
</div>
CSS
input {
display: block;
}
http://jsfiddle.net/XzSGd/
<form>
<fieldset>
<label>name:</label> textbox
<label>lastname:</label> textbox
<label>address:</label> textbox
</fieldset>
</form>
If you use an additional tag around, you can set the css to be as follows:
label {
display: inline-block;
width: 100px; //whatever width suits you
}
This way, all the labels will be the same width and, as long as the text is shorter than that, they will make the textboxes align.
You could use classes for the labels. See code below
HTML
<form>
<fieldset>
<span class="label">name:</span> textbox
<span class="label">lastname:</span> textbox
<span class="label">address:</span> textbox
</fieldset>
</form>
CSS
.label{
display:inline-block;
width:150px;
}
*Change the width according to your need.
This is how I would do it. Float everything. Each textbox/label combo gets its own div, which makes it easy to apply a responsive design framework. Make this as narrow as you want by styling the fieldset. Obviously(?) you would want to include names for each input, and for-attributes for the labels.
http://jsfiddle.net/s3jn3/
input {
float: right;
margin-top: 0.5em;
}
label {
float: left;
}
fieldset>div {
clear: both;
}
<fieldset>
<div>
<label>Item A</label>
<input type="text" />
</div>
<div>
<label>Item B</label>
<input type="text" />
</div>
<div>
<label>Item C</label>
<input type="text" />
</div>
</fieldset>
Try to put it in table, like so:
<form>
<fieldset>
<table>
<tr><td align="left">name:</td> <td>textbox</td>
<tr><td align="left">lastname:</td> <td> textbox</td>
<tr><td align="left">address:</td> <td>textbox</td>
</table>
</fieldset>
</form>
I've tried a few things but haven't been able to get the result I am after.
This is my jsfiddle:
http://jsfiddle.net/spadez/2JTfc/4/embedded/result/
This is the code:
<div id="header">
<img src="test.jpg" />
<form id="search_form">
<input class="kw" id="keyword" placeholder="Keyword" type="text"></input>
<input id="loc" placeholder="Location" type="text"></input>
<input type="submit" value="Search" class="button" id="search">
</form>
<ul>
<li>Post
</li>
</ul>
</div>
How can I move the form so that it sits to the right of the test.jpg image in the header on the same line? Should I be surrounding it in divs and floating it, or is there a nicer way?
Add display:inline-block to form
#search_form{
display:inline-block
}
DEMO
Try this:
#header img {vertical-align: middle;}
#header form {display: inline-block; vertical-align: middle;}
The last act is to remove float: left from the inputs.
The default display style of a form is block. So you'll need to change that to inline-block as you want it to appear inline. See this jsFiddle
#search_form {
display: inline-block;
}