CSS styling for horizontal list with bullet only between elements

后端未结

关注

 11  2341

刺人心

I\'m not sure how to build a horizontal list that looks like this:

$\"Centered$

相关标签:

11条回答

[愿得一人]

2020-12-09 08:07

I just used text-indent to successfully style a bulleted list as follows:

HTML:

<ul class="horizontal">
<li>Payment</li>
<li>Check</li>
<li>Direct Deposit</li>
</ul>

CSS:

ul.horizontal li { list-style-type:disc; float: left; text-indent:-4px; margin-right:16px; }

0 讨论(0)

心在旅途

2020-12-09 08:09

    ul li {
        display: inline;
        text-align: center
    }

  .separator {
        display: inline-block;
        background-color: black;
        width: 5px;
        height: 5px;
        border-radius: 45px;
        vertical-align: middle;

    }

<ul>
    <li>item 1</li> <div class='separator'></div>
    <li>item 2</li> <div class='separator'></div>
    <li>item 3</li> <div class='separator'></div>
    <li>item 4</li> <div class='separator'></div>
    <li>item 5</li>
</ul>

You can also build this in JavaScript using a loop and concatenating a new li for x amount of list items but seeing as your post doesnt say anything about a dynamically generated list I'll leave it just as this for now.

0 讨论(0)

心在旅途

2020-12-09 08:09

<table>
    <tr>
        <td>
    <ul>
        <li>First menu item</li>
    </ul>
            </td>
        <td>
    <ul>
        <li>Second menu item</li>
    </ul>
        </td>
        <td>
    <ul>
        <li>Third menu item</li>
    </ul>
        </td>
        </tr>
</table>

0 讨论(0)

刺人心

2020-12-09 08:13

In the simplest of ways, all you would require is setting text-align: center on the ul and display: inline-block on li in your stylesheet. You can use an image as a separator if you wish by leveraging the :after pseudo class on li.

Here's an example.

0 讨论(0)
发布评论:

提交评论
- 加载中...

终归单人心

2020-12-09 08:14

Here is a further improved version. I kept getting an inconsistency at certain page widths where two bullets would be missing rather than just the last one. i.e.

link1 · link2 · link3 link4

link5 · link6

I think the issue was that removing the last bullet separator could itself affect the text flow if the page width was just right. The new script locks the original text flow by adding and removing literal line breaks.

I have the same script to run every time the screen is resized so you don't get stuck with awkward line breaks.

<style>
ul { width: 700px; text-align : center }
ul li { display: inline; white-space: nowrap; }
ul li:after { content: " \00b7"; }
ul li.nobullet:after { content: none; }
</style>

<body onresize="processBullets()" onload="processBullets()">
<ul>
    <li><a href="http://google.com">Harvard Medical School</a></li>
    <li><a href="http://google.com">Harvard College</a></li>
    <li><a href="http://google.com">Harvard Medical School</a></li>
    <li><a href="http://google.com">Harvard College</a></li>
    <li><a href="http://google.com">Harvard Medical School</a></li>
    <li><a href="http://google.com">Harvard College</a></li>
    <li><a href="http://google.com">Harvard Medical School</a></li>
    <li><a href="http://google.com">Harvard College</a></li>
</ul>
<body>

<script>
function processBullets() {
    var lastElement = false;
    $("br").remove(".tempbreak");
    $("ul li").each(function() {
        $(this).removeClass("nobullet");
        if (lastElement && lastElement.offset().top != $(this).offset().top) {
            $(lastElement).addClass("nobullet");
            $(lastElement).append('<br class="tempbreak" />');
        }
        lastElement = $(this);
    }).last().addClass("nobullet");
}

</script>

0 讨论(0)

上一页 1 2