I have the following HTML and CSS. I am trying to have the IMG and then the BUTTON in the same line one next to the other. But they keep coming out one on top of the other.
<div class="cartAddingButton">
<img class="cartIcon" src="../BG/cartIcon1.png">
<form name="cartAdding" action="../cart/cartAdding.php" method="post">
<input type="button" value="<?php echo $lang['ADDTOCART']; ?>" class="addToCart" onclick="addtocart(<?php echo $itemId; ?>)" />
</form>
</div>
CSS:
.cartAddingButton {
text-align: right;
vertical-align: middle;
display: inline-block;
}
.cartIcon {
float: right; }
.addToCart {
float: right; }
That's because the button is within a <form> which is simply a block-level element .. you can try changing the display value of the form to display: inline-block; though remember that its width will only be as wide as its content, just like elements in the inline-formatting context.
form {
display: inline-block;
}
jsFiddle
Related
I am currently trying to make a simple form. As an example, this is what I'm trying to get it to look like.
This is the current architecture for each field:
<p>
<label>First Name</label>
<input></input>
</p>
I struggle once I get to the CSS part. Here's a full example, and any help would be greatly appreciated
div {
text-align: center;
}
form p {
display: inline-block;
}
form label {
text-align: left;
display: block;
}
<div>
<form>
<p><label>Name:</label> <input type="text"></p>
<p><label>Password:</label> <input type="text"></p>
</form>
</div>
I just cannot figure out how to get a line break after the input with the current CSS.
can use float instead of inline-block
form {
max-width: max-content;
margin: auto;
}
form p {
float: left;
clear: left;
}
I am making this basic thing were there is a label followed by a textblock and on another line there is a button with a textblock for the answer besides the button.
I want the button(generateButton) and the textblock for answer (answerField) under the label (labelDay)and the first textblock(dayInput) but when I clear left on the button and the answerbox it sets the button under the label and first inputbox but my answerbox goes under my button and it needs to be besides it. Is there a way to do it without a br tag?
This is my code so far
#labelDay{
margin-left: 5px;
position: relative;
float: left;
}
#dayInput{
position: relative;
float: left;
margin-left: 5px;
}
#generateButton {
float: left;
clear: left;
}
#answerField{
float: left;
clear: left;
}
<label for="dayInput" id="labelDay">Geef een dag in:</label>
<input type="text" id="dayInput"/>
<input type="button" id="generateButton" value="Genereer tekst" class="answer"/>
<input type="text" id="answerField" class="answer">
Why do you use float in this situation?
All Elements are inline-elements. So they would appear next to each other.
My approach is to define two div-blocks for the rows (no css):
<div>
<label for="dayInput" id="labelDay">Geef een dag in:</label>
<input type="text" id="dayInput"/>
</div>
<div>
<input type="button" id="generateButton" value="Genereer tekst" class="answer"/>
<input type="text" id="answerField" class="answer">
</div>
You almost had it - you just need to remove the clear: left from #answerField.
Floats make elements "flow" around eachother - you can imagine a bunch of float: left elements as each trying to move as far to the left as they can without touching another element or going off the side of the screen before going to the next line.
A clear on an element forces itself, and any floated element after it to the next line - so your clear on #generatButton is already starting a second line, and the on #answerField is starting an unwanted 3rd one.
#labelDay{
margin-left: 5px;
position: relative;
float: left;
}
#dayInput{
position: relative;
float: left;
margin-left: 5px;
}
#generateButton {
float: left;
clear: left;
}
#answerField{
float: left;
}
<label for="dayInput" id="labelDay">Geef een dag in:</label>
<input type="text" id="dayInput"/>
<input type="button" id="generateButton" value="Genereer tekst" class="answer"/>
<input type="text" id="answerField" class="answer">
I have a responsive form element which is supposed to be inline with a title, like so:
which is fine in Firefox because this is what I'm looking for.
But when we see the same code in Chrome (edit, same results in Blisk, Yandex and maybe all webkit browsers, along with MS Edge and IE11), this is what I get:
The code:
h1,
form {
display: inline-block;
vertical-align: middle;
}
h1 {
font-size: 48px;
}
.field {
display: table-cell;
}
.field,
input {
width: 100%;
}
input,
.btn {
padding: 10px 16px;
box-sizing: border-box;
}
<h1>Inline title</h1>
<form action="">
<div class="field">
<input type="text" placeholder="Email Address" />
</div>
<div class="field">
<button class="btn">Submit</button>
</div>
</form>
Or, take a look at the code here (Codepen.io).
Does FF and Chrome handle the CSS differently? I feel that Chrome is showing the correct layout considering that the .field class has display: table-cell;, but I'm not sure about that. Is there a way to achieve what Firefox has shown in Chrome as well without removing the responsive nature of the input field?
Thanks.
Just remove the property: table-cell and make sure that everything is inline-block:
h1,
form {
display: inline-block;
vertical-align: middle;
}
h1 {
font-size: 48px;
}
.field {
display: inline-block; /* instead of table-cell > inline-block */
}
input,
.btn {
padding: 10px 16px;
}
SEE demo here: CODEPEN
There is no need to use table-cell just use float:left and remove the width from field class.
h1,
form {
display: inline-block;
vertical-align: middle;
}
h1 {
font-size: 48px;
}
.field {
float: left;/* Use floating here */
}
.field,
input {
/*width: 100%;*/
}
input,
.btn {
padding: 10px 16px;
}
<h1>Inline title</h1>
<form action="">
<div class="field">
<input type="text" placeholder="Email Address" />
</div>
<div class="field">
<button class="btn">Submit</button>
</div>
</form>
I have this HTML Code:
<h4>Company Details</h4>
<div>
<label for="company">Company</label>
<div>
<input type="text" name="company" value="<?php echo $customer["company"]; ?>" />
</div>
</div>
I would like to have the text inputs and labels displaying inline with each other then as the screen gets smaller to move the text inputs under the labels
There are many ways to achieve this. Chose the one that fits your project the best. I would set the label and the div containing the input as "inline" or "inline-block" using CSS. Then if you need then line to collapse into two, use media queries (see the last code snippet).
<h4>Company Details</h4>
<div class="input-group">
<label for="company">Company</label>
<div>
<input type="text" name="company" value="<?php echo $customer["company"]; ?>" />
</div>
</div>
// This will make them show inline occupying half the width
.input-group > label, .input-group > div{
display: inline-block;
width: 50%;
}
I sometimes have problems with extra pixels in inline-blocks,
and I typically solve it by floating the blocks or setting the
font size to zero.
// This way the label and input float
.input-group {
clear: both; // So the container doesn't collapse
}
.input-group > label, .input-group > div{
float: left;
width: 50%;
}
For the font size version:
// This way the font size in the container is zero
.input-group {
font-size: 0;
}
.input-group > label, .input-group > div{
display: inline-block;
width: 50%;
font-size: 12px;
}
Your div will automatically stretch to 100% of the screen, so You don't need media queries to set its width; it's already responsive as is. But if you insist on using them, or need them, add this as well:
#media (max-width: 500px) {
.input-group > label, .input-group > div{
display: block;
float: none;
}
}
It's pretty easy to achieve. Simply set:
.inputLine label, .inputLine div {
display: inline;
}
With the HTML being:
<h4>Company Details</h4>
<div class="inputLine">
<label for="company">Company</label>
<div>
<input type="text" name="company" value="My Company" />
</div>
</div>
Working example:
http://jsfiddle.net/wLjekogo/
Updated: april 20th, 2015
To achieve the requested output, while allowing multiple inline elements. You could use the following HTML/CSS combination:
HTML
<h4>Company Details</h4>
<div class="inputLine">
<label for="company">Company</label>
<input type="text" name="company" value="My Company" />
</div>
<div class="inputLine">
<label for="company">Company</label>
<input type="text" name="company" value="My Company" />
</div>
CSS
.inputLine {
display: inline-block;
}
.inputLine label {
display: inline-block;
max-width: "100%";
}
.inputLine input {
display: inline-block;
width: auto;
}
This would show all input fields inline, unless the screen is too small. In which case first the divs will be on a new line, and even more smaller, a vertical form.
Example:
http://jsfiddle.net/wLjekogo/2/
I'm having trouble containing CSS to a single div without scrambling everything.
I'm trying to get hospital/name/title/dep on seperate lines(vertical) with aligned text boxes then the other sections on the same line respectively(horizontal)
Any help would be greatly appreciated
<div class="main" id="boxalign">
<p>
<label>Hospital:</label> <input type="text"/><br>
<label>Name:</label> <input type="text"/><br>
<label>Title:</label> <input type="text"/><br>
<label>Department:</label> <input type="text"/><br>
</p>
</div>
CSS
#boxalign, label p{
display: inline-block;
float: left;
clear: left;
width: 70px;
text-align: right;
}
Not sure if my problem really shows with the code above so heres all of in jsfiddle: http://jsfiddle.net/f8qa2/
I think your CSS selector is malformed, try this instead:
#boxalign label p {
display: inline-block;
float: left;
clear: left;
width: 70px;
text-align: right;
}
Also, rather than use <br>s to break lines, put each <label>/<input> pair in it's own <p>:
<div class="main" id="boxalign">
<p>
<label>Hospital:</label>
<input type="text" />
</p>
<p>
<label>Name:</label>
<input type="text" />
</p>
<p>
<label>Title:</label>
<input type="text" />
</p>
<p>
<label>Department:</label>
<input type="text" />
</p>
</div>
Fiddle
I don't think you meant to put that comma there, everything looks good without it.
#boxalign label p{
display: inline-block;
float: left;
clear: left;
width: 70px;
text-align: right;
}
Link
#boxalign, label p Means that you want to target elements with the id boxalign and p tags within labels.
#boxalign label p Means that you want to target p tags within labels with a parent element with the id boxalign.
I think you just have a rouge , and your p and label are the wrong way round in your selector.
Try
#boxalign p label{
display: inline-block;
float: left;
clear: left;
width: 70px;
text-align: right;
}
Example here
Your selector is wrong. It should be #boxalign p label {}.
label and p are round the wrong way based on your HTML.
remove the unceccesary "," from the css selector.
Hope that helps.