Combining several position-aligned classes into a single div instead of each having their own individual div

Question

Combining several position-aligned classes into a single div instead of each having their own individual div

Trying to create a question component where users can choose the correct answer out of 4 options.

I planned to use 4 input styles with a checkmark "radio" DIV on the right. When a user clicks on an option, it should display a checkmark while others show a red "x".

<div class="answer">
<input type="text" autocomplete="off" name="answer" id="answer-1" placeholder="Answer 1" class="form-control input" value="" />
<button type="radio" class="btn btn-success answer-type" style="" value="1">
<i class="glyphicon glyphicon-ok"></i>
<div class="left-check"></div>
</button>
</div>

Facing an issue where all boxes are positioned at the top-right corner of the first input field.

Any suggestions or solutions would be greatly appreciated. Thank you!

jquery html css twitter-bootstrap

Answer 1

Answer №1

Simply add the following CSS code to your existing stylesheet:

.answer { position:relative; }

Check out the updated example here: http://jsfiddle.net/58arV/1/

Remember, according to CSS specifications, an absolutely positioned element is placed relative to its nearest parent that is either relative or absolute.

Answer 2

Simply add the following CSS code to your existing stylesheet:

.answer { position:relative; }

Check out the updated example here: http://jsfiddle.net/58arV/1/

Remember, according to CSS specifications, an absolutely positioned element is placed relative to its nearest parent that is either relative or absolute.

Combining several position-aligned classes into a single div instead of each having their own individual div

Answer №1

Similar questions

Intersecting Hyperlink Elements Creating a Hover Effect

The div remains unchanged when the button is clicked

SWI-Prolog and the Selection drop-down element in HTML

Inserting JQuery Selector from a .js file into a .php file at the beginning

Issue with scrollTop functionality on Android smartphones

JavaScript can be used to create dynamic frames within a

Various conditional statements based on the dropdown menu choice

Can you explain the meaning of this AJAX code snippet?

Modify the text tone within a specific cell

Using jQuery to Drag: Creating a draggable effect on a div element

Creating a sliding bottom border effect with CSS when clicked

Creating unique CSS div designs based on the nth-child selector

Using Cascading Style Sheets (CSS) to make posts appear above an image in a scrolling format

How can we transfer a jQuery value from an input field without using a single

"Employing AJAX along with jQuery in .NET often leads to the error message stating, 'The requested resource was not

Issue with Bootbox alert causing focus to not return to the input box

How can I code a div to automatically scroll to the top of the page?

Stopping all animations with JQuery animate()

What is the best way to instruct jQuery to disregard an empty server response?

Acquiring a hyperlink using a regular expression from the <a href> tag