Home/ Questions/Q 7428345
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-29T08:43:54+00:00

I’ve created a simple jQuery Mobile page – have put the relevant sample here:

  • 0

I’ve created a simple jQuery Mobile page – have put the relevant sample here:

http://jsfiddle.net/EhyKa/

I don’t want the li items that contain links, in this case the Phone H, Phone M and Phone W items to be formatted differently to the other items in the list. At the moment the text and the link are getting split onto separate lines and have different styles compared to the other items.

Can anyone point to what I need to change to make this consistent (CSS or JavaScript I presume?).

Many thanks,
Steve

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Changing the styles should fix the problem. make the anchor to inline-block. and give the appropriate padding.

    Below is the code, after modification.

    <div data-role="page" id="details" data-add-back-btn="true"> 
    <div data-role="header">
    <a href="../page.php" data-icon="home" class="ui-btn-right">Home</a>
    <h1>Contact Details</h1>
    </div>
    <div  data-role="content">

    <ul data-role="listview" data-inset="true" data-dividertheme="b">
            <li>First Name: Tom</li>
            <li>Surname: Jones</li>
            <li data-icon="false" style="height:35px;padding-left:15px;font-size:14px">Phone H: <a href="tel:123 4567" style="display:inline-block;padding-left:0px">123 4567</a></li>
            <li data-icon="false" style="height:35px;padding-left:15px;font-size:14px">Phone W: <a href="tel:123 4567" style="display:inline-block;padding-left:0px">123 4567</a></li>
            <li data-icon="false" style="height:35px;padding-left:15px;font-size:14px">Phone M: <a href="tel:123 4567" style="display:inline-block;padding-left:0px">123 4567</a></li>
        </ul>

    </div>

</div>

</body>
</html>
    • 0