[ROZWIĄZANY] Ramka wokół tekstu

Mam taką sytuację:

Chcę żeby ta ramka wokół tekstu “Forward” była dopasowana do tekstu, tak jak w wyrazach powyżej. To jak one wyglądają i jak to działa jest określone w skypcie, ale nie przeze mnie pisanym, a ja nie znam się na programowaniu. Dlatego proszę o pomoc tu. To “Forward”, to jest tekst stały nieuwarunkowany innymi zmiennymi. Ale dobrze byłoby gdybym wiedział jak to zaprogramować tak, że jak będę chciał ten wyraz zamienić na inny krótszy albo dłuższy, to ramka wokół niego się sama dopasuje.

Ponadto chcę aby ten wyraz z dołu znalazł się w swojej ramce obok, po prawej od tego phrasal-verb, tj. w jednej linii.

To co widać ma zrzucie z ekranu jest napisane tak:

<div id="tags-container"></div> <p style="border:1px; border-style:solid; border-color:#3399ff; frame: 1px; border-radius: 3px; padding: 0.25rem; margin: 0.25rem; font-size: 18px; color:#3399ff;"> Forward </p>

Wiem, że są poradniki, ale nie bardzo wiem czego konkretnie w nich szukać, więc to nie jest lenistwo z mojej strony, że się tu pytam. Proszę o podanie jak to zrobić.

Daj link do strony, bo bez tego ani rusz.

To nie jest na stronie tylko w programie do nauki słówek.

To potrzebna więcej kodu HTML bo z tego nic nie wynika oraz jeszcze style CSS.

To co widać na moim screenie w górnym wierszu, to jest wynik tego skryptu. On służy do wyświetlania tagów w programie Anki. A to moje “Forward” poniżej, to jest po prostu wyraz, i chcę żeby się wyświetlał obok tego skryptu i ładnie razem wyglądał. Z tym, że zamieniłem sobie wypełnienie ramki na kolorowy tekst.

Formatowanie tagów:

#tag{
 font-size: 18px;
 border-radius: 3px;
 padding: 0.15rem;
 margin: 0.15rem;
}

Może ktoś chociaż wie jak dopasować ramkę wokół wyrazu “Forward”?

Z tego co dałeś dalej nie wynika czemu ten element Ci się tak rozjechał więc siła rzeczy nie wiadomo jak to naprawić.

1 polubienie

Może wywal element p jak pozostałe dwa go nie mają.

Lub zostaw i forward daj jako trzeci tag w div, jak ma być tagiem.

“Forward” nie ma być tagiem. W tym rzecz. Ma tylko tak samo wyglądać. Ma pełnić tylko funkcję informacyjną dla mnie. Równie dobrze mogłoby być “Uwaga”.

Może dlatego się tak rozjechało, że to p jest chyba znacznikiem akapitu?

Ale ja nie wiem czym można zastąpić to p.

Zrobiłem tak i mi przeniosło “Forward” na początek:

<div id="tags-container"> <span style="border:1px; border-style:solid; border-color:#3399ff; frame: 1px; border-radius: 3px; padding: 0.15rem; margin: 0.15rem; font-size: 18px; color:#3399ff;"> Forward </span></div>

Jak jest tak:

<div id="tags-container"> </div> <span style="border:1px; border-style:solid; border-color:#3399ff; frame: 1px; border-radius: 3px; padding: 0.15rem; margin: 0.15rem; font-size: 18px; color:#3399ff;"> Forward </span>

to pozostaje na dole.

A chciałbym żeby było na końcu w jednej linii.

Zostaw p, dodaj na tag-scontainer i p style display: inline-block;

1 polubienie
<div id="tags-container"> </div> <p style="border:1px; display: inline-block; border-style:solid; border-color:#3399ff; frame: 1px; border-radius: 3px; padding: 0.15rem; margin: 0.15rem; font-size: 18px; color:#3399ff;"> Forward </p>

Dodałem display: inline-block; i zamieniłem na p, ale nie rozumiem co znaczy: dodaj na tag-scontainer

Mam to dodać do skryptu? Czy tylko wkleić gdzieś do tego co powyżej?

Nie mam pojęcia, bo nie mam pojęcia jak to działa i w jaki sposób to modyfikujesz. Zdziwisz się ale totalnie nie mam pojęcia w jakim programie ty te zmiany wprowadzasz i co ten program robi.

Masz doprowadzić do takiej finalnej postaci:

<div id="tags-container" style="display: inline-block;"> </div> <p style="border:1px; display: inline-block; border-style:solid; border-color:#3399ff; frame: 1px; border-radius: 3px; padding: 0.15rem; margin: 0.15rem; font-size: 18px; color:#3399ff;"> Forward </p>

Udało się. Bardzo dziękuję.

Przy okazji, to jest program do uczenia się, zapamiętywania danych, np. słówek języków obcych, oparty o algorytm wyznaczający powtórki. Bardzo pomocny w skutecznym zapamiętywaniu.
https://apps.ankiweb.net/