Question

我遇到了一些问题，试图为我拥有的两个<ul>列表设置不同的行间距样式。

我如何让它们与众不同？如何编写css代码告诉其中一个添加行间距？

我在w3schools网站上，但我觉得我有点失落，因为我使用它：

<style type=text/css">
ul li {padding:6px;}

这是将填充应用于两个列表，如何区分两个列表＆gt;

ul list example 1：

<ul class="a">
    <li><b>Asset Question</b> - a question requested for a specific job code and posting</li>
    <li><b>Common Asset Questions</b> - a question likely to used by mnay agencies, such as proficiency in Excel or Word, HR/CMS or MMARS (i.e., the existing question ACOMMON-01 - How proficient are you in Microsoft Outlook?)</li>
    <li><b>Special Requirement Question</b> - typically a question about a license or certification required for the job title in general or for a specific position for that title (i.e., the existing question "SREQ-31" - Do you possess a current and valid Massachusetts Class A Motor Vehicle Operator's License?).</li>
</ul>

ul list example 2：

<ul class="b">
<li><b>Less than 1 year of experience</b></li>
<li><b>At least 1 year but less than 3 years of experience</b></li>
<li><b>At least 3 years but less than 5 years of experience</b></li>
<li><b>At least 5 years but less than 7 years of experience</b></li>
<li><b>At least 7 years but less than 10 years of experience</b></li>
<li><b>At least 10 years of experience</b></li>
<li><b>None of the above</b></li>
</ul>

Answer 1

MT= [[M[j][i] for j in range(len(M))] for i in range(len(M[0]))]

Answer 2

<script>
    export default{
        props:['idStore'],
        methods:{
            addFavoriteStore(event){
                $(function () {
                    $(document).ajaxError(function (e, xhr, settings) {
                        if (xhr.status == 401) {
                            window.Laravel.baseUrl+'/login'
                        }
                        else {
                            event.target.disabled = true
                            const payload= {id_store: this.idStore}
                            this.$store.dispatch('addFavoriteStore', payload)

                            setTimeout(function () {
                                location.reload(true)
                            }, 1500)
                        }
                    });
                });
            }
        }
    }
</script>

...仅针对班级=＆＃34; a＆＃34;列表。

Answer 3

这是一个样式2列表的示例。

只需将自定义类添加到css中的html元素即可。（ul.your级）。您也可以使用“.your-class”而不指定html元素。

ul.a {
  list-style-type: circle;
  padding-left: 10px;
}

ul.b {
  list-style-type: square;
  padding-left: 20px;
}

List A:<br>
<ul class="a">
    <li><b>Asset Question</b> - a question requested for a specific job code and posting</li>
    <li><b>Common Asset Questions</b> - a question likely to used by mnay agencies, such as proficiency in Excel or Word, HR/CMS or MMARS (i.e., the existing question ACOMMON-01 - How proficient are you in Microsoft Outlook?)</li>
    <li><b>Special Requirement Question</b> - typically a question about a license or certification required for the job title in general or for a specific position for that title (i.e., the existing question "SREQ-31" - Do you possess a current and valid Massachusetts Class A Motor Vehicle Operator's License?).</li>
</ul>

<hr>

List B:
<br>
<ul class="b">
    <li><b>Less than 1 year of experience</b></li>
    <li><b>At least 1 year but less than 3 years of experience</b></li>
    <li><b>At least 3 years but less than 5 years of experience</b></li>
    <li><b>At least 5 years but less than 7 years of experience</b></li>
    <li><b>At least 7 years but less than 10 years of experience</b></li>
    <li><b>At least 10 years of experience</b></li>
    <li><b>None of the above</b></li>
</ul>

Answer 4

<ul class="a">
    <li><b>Asset Question</b> - a question requested for a specific job code and posting</li>
    <li><b>Common Asset Questions</b> - a question likely to used by mnay agencies, such as proficiency in Excel or Word, HR/CMS or MMARS (i.e., the existing question ACOMMON-01 - How proficient are you in Microsoft Outlook?)</li>
    <li><b>Special Requirement Question</b> - typically a question about a license or certification required for the job title in general or for a specific position for that title (i.e., the existing question "SREQ-31" - Do you possess a current and valid Massachusetts Class A Motor Vehicle Operator's License?).</li>
</ul>
<ul class="b">
<li><b>Less than 1 year of experience</b></li>
<li><b>At least 1 year but less than 3 years of experience</b></li>
<li><b>At least 3 years but less than 5 years of experience</b></li>
<li><b>At least 5 years but less than 7 years of experience</b></li>
<li><b>At least 7 years but less than 10 years of experience</b></li>
<li><b>At least 10 years of experience</b></li>
<li><b>None of the above</b></li>
</ul>

CSS

.a li {
  padding-bottom: 10px;
}

.b li {
  padding-bottom: 30px;
}

现场演示 - https://jsfiddle.net/kg0qvmzh/

使用CSS格式化列表

4 个答案: