How do I style service links?

I have the same issue. In 1.x, all service links used to be of the class="service-links" which could then be styled in the CSS to sit next to each other, for example.
With the advent of 2.x, the service links are all in separate classes such as class="service-links-digg", class="service-links-delicious" and so forth. This makes it hardly feasible to write proper CSS. Reintroducing the class="service-links" would be a way out I guess.

If you want all the links to behave the same way you can assign a style based on the parent item. The CSS example below makes all the links appear on the same line (in 6.x-2.0 and 6.x-2.x-dev).

.service-links li {
	display:inline;
}

From my perspective it is good that each item has its own class as that adds the extra option of styling each link uniquely.

Hope this helps.

Paul

This would require the lis to be in the class service-links, right? That doesn't appear to be the case though:

[...]
<div class="postmeta">
    <ul class="links inline">
        <li class="comment_add first"><a href="/~nschloe/comment/reply/150#comment-form" title="Add a new comment to this page.">Add new comment</a></li>
        <li class="node_read_more"><a href="" title="my title">Read more</a></li>
        <li class="upload_attachments"><a href="ref" title="Read full article to view attachments.">1 attachment</a></li>
        <li class="service-links-delicious"><a href="hyperlink" title="Bookmark this post on del.icio.us." id="service-links-delicious-1" class="service-links-delicious" rel="nofollow"><img src="/modules/service_links/images/delicious.png" alt="del.icio.us" title="" width="16" height="16" /></a></li>
[...]

No, it requires one of the parents of the li element (at any remove) to be of the class .service-links. So for example from my site it has generated the following code where the list of links is enclosed within a div element with the .service-links class:

<div class="service-links">
<div class="service-label">Share </div>
<ul class="links">
<li class="service-links-twitter"><a href="http://twitter.com/?status=http%3A%2F%2Flocalhost%3A8082%2Fcontent%2Ftest%20--%20Test" title="Share this on Twitter" class="service-links-twitter" rel="nofollow"><img src="/sites/all/modules/service_links/images/twitter.png" alt="Twitter" title="" width="16" height="16" /> Twitter</a></li>
<li class="service-links-facebook"><a href="http://www.facebook.com/sharer.php?u=http%3A%2F%2Flocalhost%3A8082%2Fcontent%2Ftest&amp;t=Test" title="Share on Facebook." class="service-links-facebook" rel="nofollow"><img src="/sites/all/modules/service_links/images/facebook.png" alt="Facebook" title="" width="16" height="16" /> Facebook</a></li>
</ul>
</div>

Does this make sense?

It actually does make sense!
However, I don't have no service-links class anywhere. :/ The parent element of the postmeta environment in the above HTML snippet is already the node.

Could you use the .postmeta class instead or do you have other lists within this div (on this or other pages) that it would impact upon?

div.postmeta li {
display:inline-block;
}

The other thing is that I note your ul has the class .inline. You could use this to trigger an inline property in all the li beneath it. This would seem to make logical sense.

ul.inline li {
display:inline-block;
}

Hope one of these ideas helps.

Paul

Yep, I suppose I could just go ahead and use postmeta. Thanks!

thx # 7, did it for me in bartik:

/* servie links fix*/
div.service-links li {
display:inline-block;

Try this:

/* Node Social share */
div.service-links {
  display: block;
  clear: both;
  margin: 15px 0px 0px 0px;
  width: auto;
  border-top: 1px solid #A1A1A1;
}

div.service-links div.service-label {
  font-size: 13px;
  width: auto;
  color: #CCCCCC;
  font-weight: bold;
  background: #F6F6F6;
  padding: 6px;
}

div.service-links ul.links {
  margin: 0px 0px 0px 5px;
  padding: 0px;
}

div.service-links ul.links li {
  margin: 5px 3px 3px 0px;
  display:inline-block;
}

div.service-links ul.links li.service-links-facebook-share {
  margin: 0px 15px 0px 0px;
}

div.service-links ul.links li .fb_iframe_widget iframe {
  border: 2px solid;
  margin: -5px 0px 0px 0px;
}