aligning radio buttons and labels on the same horizontal axis

Is there a way to ensure that radio buttons and their labels appear in the same line? I've tried adding margin and padding properties to the span tag, but it doesn't seem to work. Any suggestions on how to solve this issue?

<form class="navbar-form pull-right" style="">
    <input type="radio" name="sex" value="male"><span>All</span>
    <input type="radio" name="sex" value="female"><span>Name<span>
    <input type="radio" name="sex" value="male"><span>Vendor No.<span>
    <input type="radio" name="sex" value="female"><span>Contact<span>
    <input type="radio" name="sex" value="male">Address<span>
    <input type="radio" name="sex" value="female">Phone
    <input class="span2" type="password">
    <input name="Finish" value="Search" class="checkout-button searchButton" type="submit" style="width: 107px;padding-left: 0px;padding-right: 0px;">
</form>
htmlcss

Answer №1

Why not consider using descriptive labels instead? http://jsfiddle.net/uBUhw/

<form class="navbar-form pull-right">
    <label><input type="radio" name="sex" value="male" /> Option 1</label>
    <label><input type="radio" name="sex" value="female" /> Option 2</label>
    <label><input type="radio" name="sex" value="male" /> Option 3</label>
    <label><input type="radio" name="sex" value="female" /> Option 4</label>
    <label><input type="radio" name="sex" value="male" /> Option 5</label>
    <label><input type="radio" name="sex" value="female" /> Option 6</label>
    <input class="span2" type="password" />
    <input name="Finish" value="Search" class="checkout-button searchButton"
    type="submit" />
</form>

If you prefer each radio button on its own line, you can achieve that by adding the following CSS:

.navbar-form label{
    display:block;
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Issue with form validation, code malfunctioning

I am struggling to figure out why this validation isn't working. Here is the HTML code I'm using: <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <script type='text/javascript' src="scripts. ...

javascripthtmlvalidation

Using jQuery, you can easily apply a new class to a div when it is

I'm currently facing an issue with adding a class of "active" to a div upon clicking it using jQuery. My goal is to apply the css class of active in order to give the button a distinct color (or the hover effect.) Unfortunately, I have been unsuccess ...

javascriptjquerycss

Using a border-radius of 50% is causing imperfect circles to appear in the Chrome browser

Typically, using border-radius: 50% is effective for many situations, and in Chrome it creates a circle appearance. However, when attempting to rapidly rotate a circle in this specific case, an issue arises. Is this a glitch with Chrome's border-radi ...

cssgoogle-chrome

Adaptive design that uses identical HTML for both desktop and mobile versions

I'm currently working on a project using Bootstrap 4 to create a responsive design, but I'm facing some challenges. I managed to achieve the desired layout on CodePen, but I'm struggling to find a way to avoid repeating the code for both de ...

htmlcssbootstrap-4

Interact with HTML Radio Buttons to Trigger Input Opening

I need to have a message saying "We're sorry..." and a "black box" displayed only when the radio button is set to YES, otherwise keep it hidden. Can I achieve this using JavaScript only, or is there a way to do it with HTML alone? <h3 >Did you ...

javascripthtmlcssradio-button

What are some ways to address the performance challenges associated with resizing images for responsive design?

When it comes to certain images, I find that scaling them based on the page size is the best way to make them responsive. <img class="img_scale" src="img.png" alt"this img doesn't have width and height definition"> In my CSS: .img_scale{wid ...

htmlcssimageperformance

Are you looking to analyze inputs and tally up any duplicates?

I am working on a form that requires users to input up to 20 1-4 character codes. My goal is to count each code entered and present the output in the following format: AB //entered once EFOO //entered once AACC x 2 //because AACC was entered twice into fo ...

phphtml

Substituting a child instead of adding it to the table

I have a query regarding a button that dynamically adds rows to a table based on an array's data. My requirement is to append the first row, but for subsequent rows, I want them to replace the first row instead of being appended, ensuring that only on ...

javascriptphphtmlarraysjson

Transforming pictures with a click

How can I make the image change when it's clicked on? I tried using this code but it's not working. <image id="s" src="s.jpg" onclick="reaction()" ></image> function reaction() { var replace=d ...

javascripthtmldom-events

One way to showcase a single piece of data without the need for looping is by utilizing the `

I am encountering an issue. Why does the insertAdjacentHTML("afterend") output keep looping? I only want to display "1" once, not repeatedly. var btn = document.getElementById("btnClick"); btn.addEventListener("click", function (e) { e.preventDefaul ...

javascripthtmlinsertadjacenthtml

Is there an HTML code block available for embedding an HTML snippet?

This has got to be one of the most irritating things I've encountered haha. So, I'm using prettify.js to add syntax coloring to my code, but whenever I try to encode HTML using either prettify.js or prism.js, I have to format it like this with a ...

javascripthtmlprettifygoogle-code-prettify

Submitting a form using jquery in HTML

Below is the code I have created. It consists of a text-input field and a 'Search' button within a form. Upon clicking the search button (submitting the form), it should trigger the .submit function to carry out the necessary processing. HTML CO ...

jqueryhtmlajaxformssubmit

Once the image is requested in HTML, three.js makes a subsequent request for the same image

This is a block of code. let image = new THREE.TextureLoader().load("http://odf9m3avc.bkt.clouddn.com/1493817789932.jpg") <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/88/three.min.js"></script> <img class='preLoad&apo ...

javascripthtmlperformancethree.jsrequest

Could the wizard control sidebar be customized to have a similar appearance?

Can I make my asp.net wizard side bar look like the one shown here: I'm not sure if it's possible since SideBarStyle usually only allows for basic styling like changing font color and size. ...

javascriptc#jquerycssasp.net

Display of content visible via stationary div

Recently, I successfully implemented a fixed div that remains at the top of my webpage. However, I encountered an issue where text would appear through the div when scrolling. You can witness this phenomenon by visiting this site and simply scrolling down ...

htmlcss

Is there a way to make a trio of buttons arranged in a flex column slide out to the left when hovered over using flexbox?

access the code example here .container { display: flex; flex-direction: column; border: 2px solid blue; } .mainCont { display: flex; background-color: #f2f2f2; min-height: 5em; justify-content: space-between; } .btn-group { display: f ...

jqueryhtmlcssflexbox

Tips for creating space between a radio button and its label text

I'm having an issue with the spacing between my radio button and radio button text box in my struts tag. It seems to be congested. Any suggestions on how to create more space between them? <div class="form-group"> <label class="col-lg- ...

cssstruts2

The attempt to run 'setProperty' on 'CSSStyleDeclaration' was unsuccessful as these styles are precalculated, rendering the 'opacity' property unchangeable

I am attempting to change the value of a property in my pseudo element CSS class using a JavaScript file. Unfortunately, I keep encountering the error mentioned in the title. Is there any other method that can be used to achieve this? CSS Code: .list { ...

javascriptcssgetelementbyidpseudo-elementgetcomputedstyle

Enhanced browsing experience with personalized search suggestions

As a developer, I am aware that you have the ability to customize the browser's suggestions for various fields. For example, specifying that a field is for email and only suggesting values for email fields in the future. Is this functionality really ...

htmlbrowserautocomplete

What is the best way to adjust the mobile menu in Wordpress so that it takes up half of the screen width?

Encountering an issue after installing the "Mobile Navigation" Wordpress Plugin to implement a mobile menu on my custom theme that currently occupies 100% of the screen width. How can I adjust it to occupy only 50% of the screen width, as shown in the conc ...

csswordpress