I want to avoid line break between the buttons login and Register,So that the two buttons come in the same line
<h1>Are You ready to take the quiz</h1>
<form action="link1">
<input type="submit" value="Login" />
</form>
<form action="link2">
<input type="submit" value="Register" />
</form>
You can use css for that.
form {
display: inline-block;
}
In order to prevent every form element you're using to get inlined, I'd attatch a class to those which you want to inline.
<form class="inline" action="link1">
<input type="submit" value="Login" />
</form>
<form class="inline" action="link2">
<input type="submit" value="Register" />
</form>
form.inline {
display: inline-block;
}
Demo
Here a solution, I used a container : sameLine so evrithing is in that div will be on the same line
.sameLine{white-space: nowrap;}
.sameLine * {
display: inline;
}
<h1>Are You ready to take the quiz</h1>
<div class="sameLine">
<form action="link1">
<input type="submit" value="Login" />
</form>
<form action="link2">
<input type="submit" value="Register" />
</form>
</div>
Related
Assume that we have a standard form with input and button elements, as in the following example. How can we stretch this form horizontally and responsively by using CSS Flexbox?
<div>
<form class="sampleform" onSubmit={this.onSubmit}>
<input
type="text"
class="input-text"
name="sampleinput"
placeholder="A placeholder ..."
/>
<button
type="submit"
class="button"
>➕
</button>
</form>
</div>
Like this :
form {
display: flex;
}
input {
width: 100%;
}
<div>
<form class="sampleform" onSubmit={this.onSubmit}>
<input
type="text"
class="input-text"
name="sampleinput"
placeholder="A placeholder ..."
/>
<button
type="submit"
class="button"
>➕
</button>
</form>
</div>
I have to display both these buttons in single line.
I tried adding style="{display:block-inline;}"> in form element as suggested somewhere but that too didn't help me. Any idea how to do it ?
<html>
<body>
<div>
<form >
<input type="submit" value="Button1" />
</form>
<form >
<input type="submit" value="Button2" />
</form>
</div>
</body>
</html>
Put both forms in their own div and use float in your css.
See fiddle example:
<body>
<div>
<div id=form1>
<form >
<input type="submit" value="Button1" />
</form>
</div>
<divid=form2>
<form >
<input type="submit" value="Button2" />
</form>
</div>
</div>
</body>
#form1{
float:left;
}
#form2{
float:left;
}
https://jsfiddle.net/5mcffrv9/
Inline-block works perfect. Take a look here. Demo
HTML
<form >
<input type="submit" value="Button1" />
</form>
<form >
<input type="submit" value="Button2" />
</form>
CSS
form { display: inline-block; }
HTML
Add
<div class="name">
</div>
to your forms each one.
Then in css add
.name{
float: left;
}
or
.name{
display:inline-block;
}
Check this fiddle
https://jsfiddle.net/kb86veLk/1/
Displaying with inline block
like so
https://jsfiddle.net/kb86veLk/2/
is probably the best way though.
You just need to do this:
CSS
form{display:inline;}
DEMO
I have submit and reset buttons for a form, and I cant for the life of me figure out how them to get under the textbox. And then the address element is displaying on the right side aswell.
<label id="warranty">
<input type="checkbox" name="warranty" />
Yes, I want the 24-month extended warranty
</label>
<label for="request" id="request">Any special requests on your order?</label>
<textarea name="request" id="request"></textarea>
<input type="submit" value="Submit Order" />
<input type="reset" value="Cancel" />
</form>
CSS:
input[type="submit"], input[type="reset"] {
display: inline-block;
width: 150px;
float: inline;
}
Surely I'm missing something right?
CSS
#request { display: block; clear: both; }
Working Fiddle
How about a line break after the textarea?
ie:
<label for="request" id="request">Any special requests on your order?</label>
<textarea name="request" id="request"></textarea>
<br />
<input type="submit" value="Submit Order" />
<input type="reset" value="Cancel" />
or via css, you could make the first of the 2 buttons clear any previous floats;
input[type="submit"] {
clear: both;
}
Instead of display: inline-block; try display: block; for either your text area (doing this will say "put nothing else on the the same line as this element unless it floats", or for your submit order and cancel buttons.
I'd also suggest putting your two buttons inside of a wrapper div so that way you can manipulate the position of those two buttons as a unit instead of individually.
Also, one last note: don't have more than one element on a page with the same id. For elements you want to apply the same properties to, make the id a class instead.
You can use a div to wrap them.
I don't see "address element", so I can't help you.
<div>
<input type="submit" value="Submit Order" />
<input type="reset" value="Cancel" />
</div>
You can try this working fiddle!
<form>
<label id="warranty">
<input type="checkbox" name="warranty" />
Yes, I want the 24-month extended warranty
</label>
<label for="request" id="request">Any special requests on your order?</label>
<div class="clear:both"></div>
<textarea name="request" id="request"></textarea>
<div class="clear:both"></div>
<input type="submit" value="Submit Order" />
<input type="reset" value="Cancel" />
</form>
I am trying to get form buttons to display inline in a row. I am using CSS to style HTML output from someone else's script, so I have to understand the structure in HTML. I can't change it to something I do understand. See the code below.
What are the default styles for these elements when used in this way? I was under the impression that was a block element and was inline. No matter how I try to style this with CSS, I can't change their position (except with a float, which I'd like to avoid in this case). Help! Thank you :)
<html>
<head></head>
<body>
<div class="comment_buttons">
<form class="button discussion__edit" method="get" action="/doku.php#discussion__comment_form">
<div class="no">
<input type="hidden" name="id" value="start" />
<input type="hidden" name="do" value="show" />
<input type="hidden" name="comment" value="edit" />
<input type="hidden" name="cid" value="f871dd5933621b4fe9070bab542ff3ea" />
<input type="submit" value="Edit" class="button" title="Edit" />
</div>
</form>
<form class="button discussion__toogle" method="get" action="/doku.php">
<div class="no">
<input type="hidden" name="id" value="start" />
<input type="hidden" name="do" value="show" />
<input type="hidden" name="comment" value="toogle" />
<input type="hidden" name="cid" value="f871dd5933621b4fe9070bab542ff3ea" />
<input type="submit" value="Hide" class="button" title="Hide" />
</div>
</form>
<form class="button discussion__delete" method="get" action="/doku.php">
<div class="no">
<input type="hidden" name="id" value="start" />
<input type="hidden" name="do" value="show" />
<input type="hidden" name="comment" value="delete" />
<input type="hidden" name="cid" value="f871dd5933621b4fe9070bab542ff3ea" />
<input type="submit" value="Delete" class="button" title="Delete" />
</div>
</form>
</div>
</body>
</html>
The form elements are inline, but the form and the div inside the form are block elements.
So change them to inline:
form, form div { display: inline; }
http://jsfiddle.net/fbCgk/
<ul style="list-style-type:none;">
<form name="frm1" action="" style="display:inline">
<li>
<input type="text" name="xxx">
</li>
<li>
<input type="submit" name="btn_submit" value="Submit">
</li>
</form>
<li>
<form name="frm2" action="" style="display:inline" >
<input type="submit" name="btn_reset" value="Reset">
</form>
</li>
</ul>
I want the two buttons to be displayed horizontally. i am trying to use lists rather than tables. What should i do to make the buttons displayed on the same line but as submit buttons of two forms.
You can use display:inline; on li
Demo on jsfiddle
If I understand correctly that you want to have the text input on the first line and the two buttons on the seccond line, here's an idea - float:
<div>
<form name="frm1" action="">
<input type="text" name="xxx"><br />
<input type="submit" name="btn_submit" value="Submit" style="float: left;">
</form>
<form name="frm2" action="">
<input type="submit" name="btn_reset" value="Reset" style="float: left;">
</form>
</div>
<br style="clear: both;" />
Note the line break with clear: both; at the end which makes sure that the next line will be really displayed on it's own line.
<form name="frm1" action="">
<input type="text" name="xxx">
<input type="submit" name="btn_submit" value="Submit">
</form>
<form name="frm2" action="">
<input type="submit" name="btn_reset" value="Reset">
</form>
CSS
form, form input{
float: left;
}
As seen here jsFiddle
Obviously though this would have an effect on all form-input elements, but can be updated to include css classes.