如何调整列表样式图片的大小

时间:2019-07-27 11:21:45

标签: html css

我一天中的大部分时间都在工作,但遇到一个问题,我希望从无序列表中删除标准项目符号,并添加一个图像。我添加了图像,但是标准项目符号点仍然存在并且图像很大,所以我想知道如何调整图像大小并删除标准项目符号点。

我已经在互联网上寻找解决方案,甚至在这个网站上似乎都没有任何作用

HTML

<div class="rank-info">
                        <h4>Available Ranks</h4>
                        <ul>
                            <li>Test</li>
                            <li>Test</li>
                            <li>Test</li>
                            <li>Test</li>
                            <li>Test</li>
                            <li>Test</li>
                            <li>Test</li>
                            <li>Test</li>
                            <li>Test</li>
                            <li>Test</li>
                            <li>Test</li>
                            <li>Test</li>
                            <li>Test</li>
                            <li>Test</li>
                        </ul>
                        </div>

CSS

.rank-info {
  padding: 0 0 2em;
}
.rank-info h4{
    color:#626262;
    font-size:1.4em;
      font-family: 'Montserrat Alternates', sans-serif;
    margin: 0 0 0.3em;
}
.rank-info p a{
    text-decoration:none;
    color: #9A9898;
}
.rank-info p a:hover{
    color: #ff0000;
}
.rank-info ul{
    color: #9A9898;
    margin-left: 25px;
    list-style-image: url(../images/580b585b2edbce24c47b291a.png);
}
.rank-info li:before {
    content:"·";
    font-size:100px;
    vertical-align:middle;
    line-height:20px;
}

以下是我的问题的屏幕截图:

Screenshot

提前感谢您,感谢您的帮助

2 个答案:

答案 0 :(得分:0)

您需要调整图像的大小,它太大了,其次,将图像放在您的li而不是UL上...检查以下代码:

Dim doc as Word.Document
Dim rng as Word.Range
Set doc = ActiveDocument
Set rng = rng.Content
rng.Collapse wdCollapseEnd
doc.Fields.Add rng, , "IncludeText " & Chr(34) & "C:\\Test\\TestFormsProtection.docx" & Chr(34) _
    & " Text2", false

https://jsfiddle.net/u1em6xfn/1/

答案 1 :(得分:-1)

要摆脱要点,请尝试使用

list-style-type: none;

只需将其放入li或ul选择器中即可。

要调整图像大小,我将只使用html标签,而不是使用CSS插入图像。这样,您可以调整html标签中图像的大小。

<li>
<image src="../images/580b585b2edbce24c47b291a.png" alt="red star" width="yourWidth" height="yourHeight"</image>
</li>