Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 6 years ago.
Improve this question
How can I make a radio-inline group of radiobuttons to align in the same line without stacking the class?
http://codepen.io/pablocgdev/pen/RKroZq
I was able to put the radiobuttons in the same line in your example just by adding the following css code:
.funkyradio-success {
display: inline-block;
}
Since your radiobuttons are inside a div, you need to make sure they don't have display:block (their default value) so that they can be rendered in the same row.
<div class="funkyradio">
<label class="radio-inline"> <p>Output</p>
<div style='display:inline;' class="funkyradio-success">
<input type="radio" name="radio" id="radio6" />
<label for="radio6">P123F</label>
</div>
<div style='display:inline;' class="funkyradio-success">
<input type="radio" name="radio" id="radio7" />
<label for="radio7">ASDF</label>
</label>
</div>
If you add the style display: inline to your div tags like I did, that should get you to the desired result. I used inline css but you might want to add it to your css file. display: inline will use only the amount of space necessary to hold your element.
Related
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 5 months ago.
Improve this question
No matter what I look up online, anything I try doesn't seem to center these annoying radio buttons with the labels inline horizontally.
I have the labels to the left of the form, with the radio buttons inline on the right of the labels.
The radio buttons are a tad lower than the labels, and I am looking to center them evenly with the labels so it looks nicer and more professional.
I am very finicky with the smallest details, so getting this right is a huge thing for me!
Hoping someone can point out what I am missing or doing wrong.
P.S. I am brand new to this!
CSS code for radio buttons
What it looks like now
It would be helpful if you could also put in your html. I don't seem to be having the same problems. The radio buttons align with the baseline of the text as can be seen below. If you need to nudge them up a bit you can use the transform css rule as per the example below
Also see here
.nudge {
transform: translateY(-0.1rem);
}
<p>Would you recommend this survey to others?</p>
<p><label for='radio1'>Yes?<input id='radio1' type='radio' name='radios'></label></p>
<p><label for='radio2'>No?<input id='radio2' type='radio' name='radios'></label></p>
<p>What is your go-to weapon for hunting deer?</p>
<p><label for='checkbox1'><input type='checkbox' id='checkbox1'>Rifle</label></p>
<p><label for='checkbox2'><input type='checkbox' id='checkbox2'>Shotgun</label></p>
<hr>
<p>NUDGED Would you recommend this survey to others?</p>
<p><label for='radio3'>Yes?<input class='nudge' id='radio3' type='radio' name='radiosx'></label></p>
<p><label for='radio4'>No?<input class='nudge' id='radio4' type='radio' name='radiosx'></label></p>
<p>What is your go-to weapon for hunting deer?</p>
<p><label for='checkbox3'><input class='nudge' type='checkbox' id='checkbox3'>Rifle</label></p>
<p><label for='checkbox4'><input class='nudge' type='checkbox' id='checkbox4'>Shotgun</label></p>
You need to wrap the label and input field in a div and use flexbox property like:
.className {
display: flex;
align-items:center;
gap:10px;
}
Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 1 year ago.
Improve this question
Below are two HTML snippets to let the user choose a language for the page:
one uses <select> and <option>s,
the other uses a <div> and alternated <input>/<label>s.
What I plan to do is pick one of those (or a better one, if one exists) and use CSS to customize the appearance of it such that something like the following would appear at the top right of the page, i.e. all alternatives should be show at the same time all the time on the page.¹
I any of 1 and 2 which is to be objectively preferred over the other?
Are there any pro and cons of 1 vs 2?
<select name="language" id="language" value="ENG">
<option>ITA</option>
<option selected="selected">ENG</option>
<option>FRE</option>
</select>
<div class="language">
<input type="radio" id="italian" name="fav_language" value="ita">
<label for="italian">Italiano</label><br>
<input type="radio" id="english" name="fav_language" value="eng" checked="checked">
<label for="english">English</label><br>
<input type="radio" id="french" name="fav_language" value="fre">
<label for="french">Français</label><br>
<div>
¹ I've obtained this static image via a <ul> with 3 <svg>s inside a corresponding <li>, so I haven't bothered adding something like an external shadow to mark the selected language, but I'd do it at some point.
As you want to freely style your language selector by means of showing all options at the same time through flag images I think none of the above options are the best choice. There's no need to get complicated. Try a div and a links solution to better fit your goal.
Something like </div><ul class="languages"><li class="nav-item">English /a></li><li class="nav-item"><a href="#french">french</li></ul>
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 2 years ago.
Improve this question
Why is div written before an id in the first example? (please look below) and not written before class="my-form"> in the second example (please look below)? sometimes we use div and sometimes not. Can you give me the reason?
First example:
<div id="sidebar">
<p>Lorem ipsum dolor sit amet </p>
</div>
Second example:
<form class="my-form">
<div class="form-group">
<label>Name: </label>
<Input type="text" name="name">
</div>
<div class="form-group">
<label> Email </label>
<input type="text" name="email">
</div>
<div class="form-group">
<label>Message</label>
<textarea name="message"></textarea>
</div>
<input class="button" type="submit" value="Submit" name="">
</form>
You are writing HTML here.
In HTML you use tags to declare the elements of your document.
When you want to specify a first-order heading u can use the tag h1 like so:
<h1>My Headline</h1>
And that will be rendered as a heading by your browser.
So what about that div?
A div is just another html element, that describes a block on your page.
You can use divs for grouping and structuring other elements.
What about class?
In HTML you can use attributes to declare additional properties for your elements. One of those attributes is the class-attribute. It is used to tell your browser, which CSS-class(es) to use for styling an element.
Here I made up a css-class with the name "red-color" that assigns red color to its elements. In the html-code I use the class-attribute to use that style-class for the second heading.
.red-color {
color: red;
}
<h1>Default style heading</h1>
<h1 class="red-color">Custom style-class heading</h1>
You never use any attribute without an element (tag).
What about the intensions of your instructor?
Nobody knows, but you can ask your instructor.
Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 7 years ago.
Improve this question
When I need place a title, I use h-number tags. But in case that I need a title in a label, for instance, should I use h-number, too?
Example:
<label ...>
<h1>Username</h1>
<input ... />
</label>
There is no need to do so. Just use styles
label,
label span {font-size: 20px; font-weight: bold}
<label for="username-input">Username</label>
<input type="text" name="username" id="username-input">
<!-- Or, if you want the input inside of the label -->
<label>
<span>Username</span>
<input type="text" name="username">
</label>
Generally, you do not want to put block elements (such as heading tags) inside of inline elements (such as a label). However, you can always alter their display style.
Another thing to remember is that heading tags should be reserved for headings. Label tags should be reserved for labels. In your case, the h1 tag inside of the label doesn't "make sense" since it is not the heading of the page. You would want to use something less prominent, such as a span, but make it look how you want.
A label should be used as a caption and does not require <h1> <h2> etc. Valid markup would look like
<label>
Username
<input />
</label>
Feel free to move the <input /> outside of the <label /> by using the for= attribute, or keep the <input /> inside your label as you have it.
<label for="username">Username</label>
<input id="username" type="text" />
See more here
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Closed 9 years ago.
Questions asking for code must demonstrate a minimal understanding of the problem being solved. Include attempted solutions, why they didn't work, and the expected results. See also: Stack Overflow question checklist
Questions concerning problems with code you've written must describe the specific problem — and include valid code to reproduce it — in the question itself. See SSCCE.org for guidance.
Improve this question
I have multiple buttons (input type="submit"). I want all the buttons to share a same style except for one button where I need to give width and height as auto.
Using class for common style and id for a specific style didn't seem to work.
Try the following:
HTML:
<input type='submit' class='one'>
<input type='submit' class='one'>
<input type='submit' class='one'>
<input type='submit' class='one'>
<input type='submit' class='one'>
<input type='submit' class='two one'>
CSS:
input.one {
//your style here
}
input.two {
width: auto;
height: auto;
}
You can select all submit buttons like this:
input[type=submit] {
/*styles for normal buttons*/
}
To select a single button, you would be better off using an ID:
#special_button {
/*styles for special button*/
}
Be sure you include the styles in the order given so that they override properly.