#1
  1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Oct 2008
    Posts
    4
    Rep Power
    0

    Question Trying to get Radio Buttons to display horizontal


    Hello,
    I have been reading through this message board for a few days now and have found great information that has helped me more than you could realize.

    I am here with my own problem now though and hoping somebody will be able to help me.

    When I took on this project I never would have imagined I would be spending this much time on trying to get radio buttons in a form to display correctly. The client wants four buttons listed horizontal, but for the life of me I can not get it to work.

    I have tried putting them in an unordered list, separate floating divs but nothing has worked.

    If anyone is able to point me in the right direction on how to get the radio buttons to list horizontal in css I would really appreciate it. The site I am working on has approximately ten different forms that all need the buttons listed this way.

    Thank You in advance for any help..I look forward to spending time on this site in the future.
    Adam
  2. #2
  3. Thanks Johnny Hart (BC) R.I.P.

    Join Date
    May 2003
    Location
    Dallas
    Posts
    5,268
    Rep Power
    1956
    Form controls are naturally inline elements, so they lay out horizontally.

    Try this bit of code:
    Code:
      <form method="get"
            action="">
        <fieldset>
          <legend>Poll</legend>
          <label for="r-yes">
            <input type="radio"
                 name="opinion"
                 id="r-yes" />yes</label>
          <label for="r-no">
            <input type="radio"
                 name="opinion"
                 id="r-no" />no</label>
          <label for="r-dunno">
            <input type="radio"
                 name="opinion"
                 id="r-dunno" />???</label>
        </fieldset>
      </form>
    That will give you three buttons, yes, no, and ??? in a single row.

    What are you doing that fails to give these results? Code?

    cheers,

    gary
    There are those who manage to build a web site without knowing what they're doing; thereby proving to themselves they do, indeed, know what they're doing.

    My html and css workshop, demos and tutorials.
    Ask a better question, get a better answer.
  4. #3
  5. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Oct 2008
    Posts
    4
    Rep Power
    0
    Thank you Gary!

    I think the fact that I have been up all night working on this had turned my brain into nothing. The error was right in front of me the entire time. I had my label tag in the css set to clear: left, but I also had it float: left. Looking at your example had reminded me to check my label tag.

    I am sure I will be back later because I am have a problem somewhere else on the site I am working on. Hopefully soon I will be able to spend time here helping others, but today is all about working

IMN logo majestic logo threadwatch logo seochat tools logo