CODEWITHSUNDEEP
htmlcss
Prima Yanuaristya
Prima Yanuaristya

Reputation: 11

How prevent newline after span using css?

I view quiz Moodle using WS(Webservice) but not using js and css from moodle. i cannot change code but can using css. Please help me, how to make CSS to prevent newline after radio button?

image

<div class="answer">
  <div class="r0">
    <input type="radio" name="q21:2_answer" value="0" id="q21:2_answer0" aria-labelledby="q21:2_answer0_label">
    <div class="d-flex w-auto" id="q21:2_answer0_label" data-region="answer-label">
      <span class="answernumber">a. </span>
      <div class="flex-fill ml-1">
        <p>&gt;</p>
      </div>
    </div>
  </div>
</div>

Upvotes: 1

Views: 77

Answers (2)

Selman Gedik
Selman Gedik

Reputation: 36

Try this.

<style>
  .w-auto {
    display: contents;
  }
</style>

<div class="answer">
  <div class="r0">
    <input type="radio" name="q21:2_answer" value="0" id="q21:2_answer0" aria-labelledby="q21:2_answer0_label">
    <div class="d-flex w-auto" id="q21:2_answer0_label" data-region="answer-label">
      <span class="answernumber">a. &gt;</span>
    </div>
  </div>
</div>

Upvotes: 0

Amir Naeem
Amir Naeem

Reputation: 610

You can use label instead of div it will fix your issue

<div class="answer">
  <div class="r0">
    <input type="radio" name="q21:2_answer" value="0" id="q21:2_answer0" aria-labelledby="q21:2_answer0_label">
    <label class="d-flex w-auto" id="q21:2_answer0_label" data-region="answer-label">
      <span class="answernumber">a. &gt;</span>
    </label>
  </div>
</div>

References:

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio https://getbootstrap.com/docs/5.0/forms/checks-radios/#radios

Upvotes: 1

Related Questions