Widget in bestehendes Frontend-Modul einbinden

Hallo!
Ich habe folgendes Problem und komme damit einfach zu keiner Lösung und bitte daher um eure Unterstützung.
Es geht um die Einbindung eines Widget von Tripadvisor in die Kopfzeile der Website.
Dazu habe ich folgenden HTML-Code erstellt der auch tadellos funktioniert:

HTML-Code:

---

<p style="font-size: 1.5em; text-align: right; padding-top: 60px; margin-top: 0">
<a href="http://web.site.net/muster" target="_blank" rel="noopener">Onlinebuchung</a>
[nbsp]Hier soll das Widget hin![nbsp]
<a style="color: #3671bc" title="Facebook Muster" href="https://www.facebook.com/Muster" target="_blank" rel="noopener" data-icon="?"></a>
</p>

---

Das Widget soll an die Stelle "Hier soll das Widegt hin!"

Wenn ich dieses wie folgt einfüge:

HTML-Code:

---

<div id="TA_socialButtonBubbles482" class="TA_socialButtonBubbles"><ul id="crgJZHcZB84M" class="TA_links V7nU4QsTSw"><li id="Had40wi0" class="NYAK7z1Oiyn">
<a target="_blank" href="https://www.tripadvisor.at/Hotel_Review-g641727-d2239281-Reviews-Gasthof_Thomann-Velden_am_Woerthersee_Carinthia_Austrian_Alps.html">
<img src="https://www.tripadvisor.at/img/cdsi/img2/branding/socialWidget/20x28_green-21693-2.png"/></a></li></ul></div>
<script async src="https://www.jscache.com/wejs?wtype=socialButtonBubbles&amp;uniq=482&amp;locationId=2239281&amp;color=green&amp;size=rect&amp;lang=de_AT&amp;display_version=2" data-loadtrk onload="this.loadtrk=true"></script>

---

zerstört es mir die gesamt Struktur.
Das Widegt wird nicht zwischen dem Text 'Onlinebuchung' und dem 'Facebook-Logo' eingefügt, sondern verschiebt alles um eine Zeile tiefer.
Wie kann ich das korrekt einfügen?

Sorry für mein Nichtwissen, aber ich hatte diesen Fall leider noch nie und hab schon den ganzn Vormittag damit verbracht diverse Google-Suchen zu durchkämmen aber noch keine brauchbare Lösung gefunden.
Vielleich kann mir jemand hier helfen.
Danke schon vorweg, schöne Grüße und bleibt gesund!
Bernhard :cool:

Klingt nach ganz natürlichen CSS-eigenschaften.
Probier's mit:

HTML-Code:

---

<div id="TA_socialButtonBubbles482" class="TA_socialButtonBubbles" style="display:inline-block;">....

---

Tendentiell ist es eher nicht zu empfehlen ein <div> in ein <p> zu packen.
https://www.google.com/search?q=bloc...nline+elements

Hallo Bernhard,

wie andre.saage im letzten Absatz aufzeigte, willst du innerhalb eines <p>-Element ein <div>
-Element benutzen. Da spielen HTML nicht mit. Absatz-Elemente dürfen keine anderen blockerzeugenden Elemente enthalten. https://wiki.selfhtml.org/wiki/HTML/...rukturierung/p

Ersetze dein <p>-Element durch ein <div>-Element. Das sollte funktionieren.

HTML-Code:

---

<div style="font-size: 1.5em">
    <a href="" target="" rel="">Onlinebuchung</a>
        <div id=""><ul><li><a><img></a></li></ul></div>
    <a style="" title="" href="" target="" rel=""></a>
</div>

---

Hans-Jürgen

Danke für die Antworten - hab wieder was dazugelernt ;)
Letztendlich musste ich aber auf den <script> Teil verzichten, da mir dieser sofort wieder einen Absatz, linksbündig , etc. erzeugte.

Ich hab's nun nicht mit dem bereitgestellten Widget gelöst, sondern mir einen eigenen Code erzeugt und damit geht's jetzt.

Wünsch Euch noch einen schönen Tag und bleibt gesund!
Bernhard :cool: