In the page: https://it.wikivoyage.org/wiki/Bari#Ferrovie_Nord_Barese there's the following code:
- {{BoxArrotondato|FR1|#FFFFFF|blue|blue|0ex}} Ferrovia Regionale 1 '''[[w:Ferrovia Bari-Barletta|Bari-Barletta]]''' (via Palese Macchie)
- {{BoxArrotondato|FM1|#FFFFFF|red|red|0ex}} Ferrovia Metropolitana 1 '''[[w:Ferrovia Bari-San Paolo|Bari-San Paolo]]'''
- {{BoxArrotondato|FR2|#FFFFFF|gray|gray|0ex}} Ferrovia Regionale 2 '''[[w:Ferrovia Bari-Barletta|Bari-Barletta]]''' (via Aeroporto)
- {{BoxArrotondato|FM2|#FFFFFF|yellow|yellow|0ex}} Ferrovia Metropolitana 2 '''[[w:Ferrovie del Nord Barese|Bari-Aeroporto-Bitonto]]'''
Where https://it.wikivoyage.org/wiki/Template:BoxArrotondato insert a spanned text as per the following code:
<span style="padding:0px .4em; color:{{{2}}}; border: 1px solid {{{4}}}; background-color:{{{3}}}; border-radius:1ex; font-weight:bold; font-size:85%">{{{1}}}</span>
The rendered HTML code is:
<ul>
<li><span style="padding:0px .4em; color:#FFFFFF; border: 1px solid blue; background-color:blue; border-radius:1ex; font-weight:bold; font-size:85%">FR1</span></li>
</ul>
<pre>Ferrovia Regionale 1 <b><a href="it.wikipedia.org/wiki/Ferrovia_Bari-Barletta" class="extiw" title="w:Ferrovia Bari-Barletta">Bari-Barletta</a></b> (via Palese Macchie)
</pre>
<ul>
<li><span style="padding:0px .4em; color:#FFFFFF; border: 1px solid red; background-color:red; border-radius:1ex; font-weight:bold; font-size:85%">FM1</span></li>
</ul>
<pre>Ferrovia Metropolitana 1 <b><a href="it.wikipedia.org/wiki/Ferrovia_Bari-San_Paolo" class="extiw" title="w:Ferrovia Bari-San Paolo">Bari-San Paolo</a></b>
</pre>
....
....
</ul>
instead of:
<pre>
<ul>
<li><span style="padding:0px .4em; color:#FFFFFF; border: 1px solid blue; background-color:blue; border-radius:1ex; font-weight:bold; font-size:85%">FR1</span> Ferrovia Regionale 1 <b><a href="it.wikipedia.org/wiki/Ferrovia_Bari-Barletta" class="extiw" title="w:Ferrovia Bari-Barletta">Bari-Barletta</a></b> (via Palese Macchie)
</li>
<li><span style="padding:0px .4em; color:#FFFFFF; border: 1px solid red; background-color:red; border-radius:1ex; font-weight:bold; font-size:85%">FM1</span> Ferrovia Metropolitana 1 <b><a href="it.wikipedia.org/wiki/Ferrovia_Bari-San_Paolo" class="extiw" title="w:Ferrovia Bari-San Paolo">Bari-San Paolo</a></b>
</li>
....
....
</ul>
Unfortunately the rendered code split each the row in two rows ruining the formatting and increasing the HTML code.
Can this behaviour be fixed?