Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!

horizontally align or ?

Ok, so I'm still learning CSS, but I cannot for the life of me figure out how to get a <<radio>> macro to display/list horizontally.  So instead of:

Choose:
  Horse (*)
  Cat    (  )           
  Dog    (  )

I would like it to do this:

Choose: Horse (*) Cat (  ) Dog (  )

Any ideas?

At first, I tried selecting various elements, like .radio, label.radio, .radio .ul, .radio .li, etc, and adding a {display: inline;}, but according to my research, the radio input is already inline by default.  So I used an inspector, and I realized that the macro (or something) is adding <br> in-between radio buttons, and that the radio buttons are not actually <li>s or part of a <ul>.

For example:
How many languages do you speak? <<radio $number_languages "1" "2" "3" "4" "5">>
produces this in the final HTML:
<input id="radio|69" class="radio" type="radio" name="$number_languages" value="1">
<label for="radio|69">1</label>
<br>
<input id="radio|70" class="radio" type="radio" name="$number_languages" value="2">
<label for="radio|70">2</label>
<br>
<input id="radio|71" class="radio" type="radio" name="$number_languages" value="3">
<label for="radio|71">3</label>
<br>
<input id="radio|72" class="radio" type="radio" name="$number_languages" value="4">
<label for="radio|72">4</label>
<br>
<input id="radio|73" class="radio" type="radio" name="$number_languages" value="5+">
<label for="radio|73">5+</label>
<br>
To eliminate the <br>s, I tried
body, .radio, label.radio {white-space: nowrap !important;}
but to no avail.

Any ideas?

Comments

  • You can eliminate <br>s with the http://twinery.org/wiki/nobr macro, or by ending a line with \
  • So do something like
    <<nobr>><<radio $choice "one" "two" "three">><<endnobr>>
    or
    <<radio $choice "one" "two" "three">>\
    ?
  • L wrote:

    You can eliminate <br>s with the http://twinery.org/wiki/nobr macro, or by ending a line with \
    So I tried
    <<nobr>><<radio $choice "1" "2" "3">><<endnobr>>
    but it still displayed the choices vertically.  I suspect the macro itself is adding <br> in-between radio options.
  • I am experimenting with <<radio>> and came across this post when trying to figure out how it works.

    Looking at the =radio]http://twinery.org/wiki/twine_1.4.1_release_notes?s[]=radio notes for this macro i used the example given in it  <<radio $feel "Strongly agree" "Strongly disagree">> but when i have a link following the passage to display the variable with <<$feel>> <<print $feel>> its empty when i test it, nothing outputs. Why is that?
  • The <<radio>> macro only works if the player then clicks a <<button>> to "submit" the results. This is to allow the player to "cancel" using an ordinary link, leaving the variables unaffected.
Sign In or Register to comment.