Replace ul bullets with a button

问题

Is it possible to replace ul bullets with a button? I know you can change to images with CSS but if I wanted an actual element?

回答1:

This isn't possible as you asked, but you could, perhaps, emulate it:

<ul>
    <li><button>some button text</button>List-element text.</li>
</ul>

And the following CSS:

ul, li {
    list-style-type: none;
}

li {
    padding-left: 0;
    margin-left: 0;
}

li button {
    margin-right: 2em;
}

JS Fiddle demo.

The success, or applicability, of this approach does, of course, depend entirely on your use-case which your question omits. With more detail, perhaps this answer can become more useful.

回答2:

No, with CSS you can style the bullets or have them omitted, and you can have generated content instead, but generated content introduces just a pseudo-element with some content, not a real button element for example.

If you need to have an ul element in markup (I wonder why), then you could use some JavaScript that injects button elements (and CSS that hides the bullets). But assuming that I guess your intentions correctly, why not use just a table with buttons in one column, associated content in another, or maybe just div elements with content starting with a button element?

来源：https://stackoverflow.com/questions/13896455/replace-ul-bullets-with-a-button