How to display the xml tags as a list using css?

Question

<team>
  <teamleader info="Team Leader">
    <name>Suresh KC</name>
    <email>[email protected]</email>
  </teamleader>
  <member id="ME1A">
    <name>Harry Jones</name>
    <email>[email protected]</email>
    <salary>2500</salary>
  </member>
  <member id="ME3A">
    <name>John Deo</name>
    <phone>9866123456</phone>
    <salary>2500</salary>
  </member>
</team>

i want to display teamleader and member as

Suresh KC [email protected]
Harry Jones [email protected] 2500
John Deo98661234562500

I tried using list-style-type:decimal; property of css but it doesnot work.

if you are getting this xml from some service, use JS and parse the xml to some object and then insert into the html... — kukkuz
– kukkuz, Commented Apr 24, 2019 at 13:14
@Kushal I'd recommend you use an ordered list if you want numbers - <ol></ol> (not ul) — Rachel Gallen
– Rachel Gallen, Commented Apr 24, 2019 at 13:29

JasperZelf · Accepted Answer · 2019-04-24 13:29:00Z

2

You could do this using only CSS, see my example below. It is more common to parse the XML using javascript and than displaying it as a list element. You'll be way more flexible that way.

teamleader,
member{
  display: list-item;
  margin-left: 1.3em;
  list-style-type: decimal;   
}

<team>
  <teamleader info="Team Leader">
    <name>Suresh KC</name>
    <email>[email protected]</email>
  </teamleader>
  <member id="ME1A">
    <name>Harry Jones</name>
    <email>[email protected]</email>
    <salary>2500</salary>
  </member>
  <member id="ME3A">
    <name>John Deo</name>
    <phone>9866123456</phone>
    <salary>2500</salary>
  </member>
</team>

answered Apr 24, 2019 at 13:29

JasperZelf

2,8441 gold badge26 silver badges35 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to display the xml tags as a list using css?

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related