How do I align my radio button with associated text?


Tags: css

Problem :

I am trying to put two radio buttons on my form. The HTML is:

<div class="container">
<form action="">
  <legend>Type your info here</legend>
  <p>
    <label>Do you have a student loan?</label>
    <input type="radio" name="loan" value="yes">Yes<br>
    <input type="radio" name="loan" value="no">No<br>
  </p>
</form>
</div>

When I run this, it turns out like this:

enter image description here

I also currently have some CSS, which may be causing the problem (I don't know if it is).

.container{
  width: 500px;
  clear: both;
}

.container input{
  width: 100%;
  clear: both;
}

So the question is: can someone please let me know how I could get the buttons to sit next to the "yes" and "no" texts/labels?



Solution :

Because, you're using width:100%; in all input element which is causing you that. Just use width 100% in input whose type is text as per your requirement:

.container input[type="text"]{
  width: 100%;
  clear: both;
}

    CSS Howto..

    How can I keep things aligned in an adaptive layout

    How to display a long link in multiple lines via CSS?

    How to optimize this css code? [closed]

    How to make div disappear when image is placed over it?

    How do I isolate floated content?

    how to write this code as link click animation

    How to move this button?

    How to Programatically Toggle a Zurb Foundation Switch Control, in Chrome?

    How to embed link HTML into CSS file for menus?

    How to change an image on mouseover of wrapper div

    HTML/ CSS: A href exceeds linking image - how to avoid?

    Google Share button not showing properly if originaly hidden

    Dropdown list doesn't show up, what am i doing wrong

    How to display a header inline with paragraph text using divs or an alternative method

    hide/show multiple div elements using jquery

    How do i add my own image to a button that links to another website in HTML & CSS?

    Bootstrap: how to stack divs of different heights?

    how to make full css container

    How to add text under every image?

    How to have an array of images side by side using css/html

    How to specify an element to re-appear after a page break?

    how to add hover effect to button using css

    How can I convert to a CSS Drop down menu

    How to make text box scroll vertical in overflow css html?

    How to add css only to options page of a plugin in wordpress?

    How do I remove column padding to have full-width inputs in Bootstrap 3?

    How to shrink the width size hyperlink?

    How to decrease spacing between bootstrap glyphicons

    How to only show certain parts with CSS for Print?

    How can I add categories-authors-members area for commenting on my website? [closed]