如何在<li>中定位图标？

Question

我有一个问题，我正在尝试重新定位＆＃34; fa-chevron-down＆＃34;使用20px填充向右对齐的图标

示例：

HTML：

form.appendChild(input[i]);
form.appendChild(option);

Run Link Code

Answer 1

将其浮动到右侧并添加20px的右边距

.ul-accordion li i.fa-chevron-down {
    font-size: 16px;
    float:right;
    margin-right:20px;
}

https://jsfiddle.net/rqhb1rtn/2/

Answer 2

Fiddle

与之前答案中的解决方案没有太大区别：

$("i.fa.fa-chevron-down").addClass('fa-rotate-270');

但 我添加了一些V形动画，其行为类似于典型的下拉图标：

这是jQuery的顶部块：

$(this).find('i.fa.fa-chevron-down').toggleClass('fa-rotate-270');

这位于底部：

.fa-chevron-down

注意：如果此处省略.fa-html5，$(document).ready(function () { $(".submenu").slideUp(); $(".link").addClass('Close'); // Start the chevron pointing to the right $("i.fa.fa-chevron-down").addClass('fa-rotate-270'); $(".link").on('click', function () { if ($(this).is(".Close")) { $(this).removeClass('Close'); $(this).next(".submenu").slideDown(); } else { $(this).addClass('Close'); $(this).next(".submenu").slideUp(); } /* When toggling, the correct state is || always executed at the correct alternation || as long as class is correctly set || before loading page. */ $(this).find('i.fa.fa-chevron-down').toggleClass('fa-rotate-270'); }) });也会旋转，看起来有点酷......

3个小修改在演示

中发表了评论

演示

＆＃13;

＆＃13;

.nav-menu {
    max-width: 350px;
    background-color:white;
}

.ul-accordion {
    padding: 0px;
    border: 1px solid black;
}

.ul-accordion li {
    list-style-type: none;

}

.ul-accordion li i {
    color: green;
    font-size: 18px;
}
.ul-accordion li i.fa-chevron-down {
    font-size: 16px;
/* Added for right justification and requested padding */
    float:right;
    padding:0 20px;   
}

.ul-accordion li i.fa-paint-brush {
    left: 35px;
    padding: 0px;
    margin: 0px 0px 0px 10px;
}

.submenu {
    padding: 0px;
}

.submenu ul {
    
    padding: 0px;
}

.submenu li{

    border-bottom: 1px solid black;
}

.link {
    text-align: left;
    font-size: 16px;
    cursor:pointer;
}

＆＃13;

<script src="https://use.fontawesome.com/f8e0e376c3.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<nav id="nav-menu" class="nav-menu">
            <ul id="ul-accordion" class="ul-accordion">
                <li>
                    <div class="link"><i class="fa fa-html5"></i>Emploplyee<i class="fa fa-chevron-down"></i></div>
                    <ul class="submenu">
                        <li><i class="fa fa-desktop"></i><a href="#">Add</a></li>
                        <li><i class="fa fa-desktop"></i><a href="#">Edit</a></li>
                        <li><i class="fa fa-desktop"></i><a href="#">Delete</a></li>
                        <li><i class="fa fa-desktop"></i><a href="#">Search</a></li>
                    </ul>
                </li>

                <li>
                    <div class="link"><i class="fa fa-html5"></i>Payment<i class="fa fa-chevron-down"></i></div>
                    <ul class="submenu">
                        <li><i class="fa fa-desktop"></i><a href="#">Add</a></li>
                        <li><i class="fa fa-desktop"></i><a href="#">Edit</a></li>
                        <li><i class="fa fa-desktop"></i><a href="#">Delete</a></li>
                        <li><i class="fa fa-desktop"></i><a href="#">Search</a></li>
                    </ul>
                </li>
  
  </ul>
        </nav>

＆＃13;

stack --version

＆＃13;

＆＃13;

＆＃13;