How to prevent automatic wrapping of links and span - HTM5

[orawolfx]

Hello,

I have following HTML code

<div style="background-color: #f5f5f5;padding: 5px;color:#66afe9; font-family: Arial;font-size: inherit;font-weight:normal; float: right;margin-right: 5%">
                        <span style="font-size: x-small"> Logged in as
                     <li style="list-style-type: none; font-size: small"><a href="#">XYZUser</a></li>
                            </span>

                        <!-- This is a Data Value of Username with Hyperlink.  When clicked, a popup page will open displaying user privileges-->
                    </div>

The out put of above code is as per following.

Logged In As
XYZUser

Instead of above, I need to display like following.

Logged In As XYZUser

How do I achieve this? What am I missing?

Thanks,
Orawolf

[PaulOB]

Put the span inside the list element as it is not allowed where you have it now.

Then move the styles from the list onto the anchor,

Lastly a ‘li’ element can only be a direct child of a ul not a div.

e.g.

<ul style="background-color: #f5f5f5;padding: 5px;color:#66afe9; font-family: Arial;font-size: inherit;font-weight:normal; float: right;margin:0 5% 0 0">
  <li style="list-style-type: none;font-size: small"><span style="font-size: x-small"> Logged in as </span><a href="#">XYZUser</a></li>
  <!-- This is a Data Value of Username with Hyperlink.  When clicked, a popup page will open displaying user privileges-->
</ul>

Of course the inline style rules should be removed to an external file and targeted with classes etc. Also it seems rather silly for one item to be in a list as a list by its very nature means more than one.

[orawolfx]

Thank you PaulOB. Approach suggested by you worked.