发表新帖
发表新帖

Vertical Align - List with “list-style-image”

后端 未结
关注
4 1853
感情败类
感情败类 2020-12-20 17:26

Neither googling nor browsing in SO helped me - hope someone here can solve this :

I have the following html :

    

  • ABC 1
    •
相关标签:
4条回答
  • 慢半拍i
    2020-12-20 17:47

    I came up with something like that, which may save u some time HTML:

    <ul class="rozcestnik">
  <li><a href="#" title="1">1</a></li>
  <li><a href="#" title="2">2</a></li>
  <li><a href="#" title="3">3</a></li>
</ul>

    CSS:

    .rozcestnik {
    list-style-type: none;
    padding: 0;
    margin: 2.5em 2em 0;
}

.rozcestnik li:before {
    background: url("icon.png") no-repeat scroll 50% 50% transparent;
    content: " ";
    display: block;
    height: 20px;
    left: -20px;
    position: absolute;
    top: 0;
    width: 20px;
}
.rozcestnik li {
    position: relative;
    padding-bottom: 5px;
    padding-left: 5px;
}

    According to custom list-image, you'll probably just need to customize the top and size ":before" and padding of "li".

    It works across all major browsers and the application IE8 and more.

    0 讨论(0)
  • 猫巷女王i
    2020-12-20 17:54

    Try some variation of 

    ul{
    background-image: url(../img/hook.png);
    background-repeat: no-repeat;
    background-position: 95% 50%;
}

    Obviously the position is unlikely to fit your needs, but fiddling around with this method would be your best bet I'd say.

    0 讨论(0)
  • 小蘑菇
    2020-12-20 18:02

    If I have understood your problem is text seems bellow the baseline?

    Try to set beelow property for your text:

    padding-bottom

    0 讨论(0)
  • 一个人的身影
    2020-12-20 18:05 
    <html>
<head>
<style>
ul
{
    list-style-image:none;
}
li
{
    color:#FFFFFF;
    font-size:16px;
    text-shadow: 0em 0.13em 0.13em #2A2A2A;
    font-family:Helvetica,Arial,Sans-Serif;
    font-weight:normal;
    line-height:35px;

    margin-bottom:5px;
    padding-left: 36px;
    background-image: url('../img/hook.png');
    background-repeat:no-repeat;
}
</style>
</head>
<body>
<ul>
<li>ABC 1</li>
<li>ABC 2</li>
<li>ABC 3</li>
<li>ABC 4</li>
</ul>
</body>
</html>

    Never seen any of our designers try to use the list-style-image when implementing custom icons for list, I guess this is why :)

    0 讨论(0)
 看不清?
提交回复
热议问题