Knop rechts binnen een float left

Goedemorgen,
Bij e-learning software waar ik wel css/js kan aanpassen maar niet de html/php code, wil ik een knop binnen een div met float:left naar rechts verplaatsen.
Heb een codepen ervan gemaakt. Leek me een vrij eenvoudige aanpassing maar ik krijg het niet voor mekaar.
Het gaat om de knop "antwoord indienen" die naar rechts moet.

Codepen linkje

Thanks!

De bedoeling van JSfiddle / Codepen.io is wel dat je JS, CSS en HTML scheidt, hè

Hoi @Aar, ah je bedoeld de JS code, die heb ik er nu uit gehaald; daar ging het niet om.

Bootstrap 4 gebruik je, zo te zien?

Je hebt nu een 'pull-left' als class. Maak daar eens een pull-right van.
Ik neem aan dat je toch ergens wel de HTML moet kunnen wijzigen. Dit kan niet zomaar gecodeerd zijn.

Anders kan je met jQuery wel deze property aanpassen.

@Aar bedankt voor je reactie. Ik gebruik geen bootstrap o.i.d. -> het is een e-learning systeem waar ik alleen de CSS/JS wat kan aanpassen. Dat maakt het wat uitdagender

Jij gebruikt geen Bootstrap, maar de HTML van dit e-learning systeem wel.
Ik begrijp niet waarom je niet bij de HTML kan komen? Welk systeem is het?

Omdat ik het systeem niet heb gemaakt. Ik kan alleen css/js code toevoegen om de e-learning wat meer in look/feel aan te kunnen passen.
Maar html/php aanpassingen, nee dat gaat niet.

Maar meer on-topic, is het met css te doen?

Met CSS of vanilla JavaScript/jQuery moet het wel te doen zijn. Maar het is in het geval van het laatste wel wat 'hack-ish'. Welk systeem is het dan? Die HTML moet toch ergens staan?

Jammer dat de e-learning een pagina layout maakt met float en met class="clear"
Dat is eigenlijk niet meer van deze tijd.

De html zit vol met BS classes, een beetje een mix van Bootstrap versie 2 en 3 (hmmm?)

Bij de button "Antwoord indienen" staat deze css

Daar zou je dit van kunnen maken

of netter is in de css een .pull-right definiëren die je kan gebruiken waar dat nodig is, in dit geval op de <a>

Dank je voor reactie @bron. Had al de onderstaande code geprobeerd maar dat werkt niet.

De 1-10-100 regel in css (simpele versie voor het leren van css)

- Elke selector in de css heeft een bepaalde selectiviteit, zie tabel.
- Bij meerdere selectors op een css regel worden de waarden opgeteld.
- Hoe hoger de opgetelde waarde, hoe hoger de selectiviteit (de prioriteit).


Een voorbeeld:

Het lijkt alsof je met h2.titel de kleur blauw maakt, maar door de hoge prioriteit van #header wordt de kleur rood.

Nog een voorbeeld:

Als je de html bekijkt lijkt het alsof h2 rood is maar omdat de class'es van links naar rechts worden gelezen is het blauw.

Tip:
- verhuis alle inline styles naar het stylesheet bestand
- werk alleen met classes
- gebruik een id alleen voor globale pagina indeling (id moet uniek zijn)
- gebruik een id als bepaalde Javascript dit vereist


Als je dit toepast op bericht #1 dan is dit voldoende om de knop rechts te zetten (selectiviteit is 10 + 10 = 20). Het is wel netter als je een .pull-right { float: right; } zou maken die je dan in de html gebruikt.

En dan blijf ik mij afvragen waarom je niet bij de HTML kan?

@bron dank je wel voor de duidelijke uitleg; wist niet dat je het ook zo kon optellen qua waarden en de selectiviteit hoe die precies werkte.

Jammer genoeg is het nog niet helemaal goed, want de vragen (in het codepen voorbeeld is er maar 1 vraag) komen door de float aanpassing door de war te staan.
Had ook gehoopt dat ik #tl-submit-question een float:right kon geven maar dat werkt niet.

@Aar, ik kan het niet duidelijker uitleggen als ik had gedaan. Kon ik het had ik het allang gedaan.

Welk e-learning systeem is dat dan? Of is dat een geheim?

Een webapplicatie?

Zeker niet geheim @Aar , het is TalentLMS.
Ik zal ze ook benaderen of ze er een oplossing voor hebben. In hun systeem kan je cursussen maken en je kan in een cursus wel html toevoegen maar niet de knoppen aanpassen.
Algeheel kan je wel CSS en JS toevoegen, daarom kan ik wel de knoppen bijvoorbeeld een ander kleurtje maken.
En met CSS wat kon ik wel de knop naar rechts zetten met een float, dat werkte voor de meeste cursussen. Maar bij een ander cursusonderdeel waar ze vragen in hebben staan die je moet slepen naar onderdelen, daar ging het mis.
Want die vragen/antwoorden (zie de codepen, stukje van de code van die cursus) gaan dan door de war.

Heel verhaal ;-) Hopelijk is het nu wat duidelijker.