Warning: file_get_contents(/data/phpspider/zhask/data//catemap/7/css/40.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Css 如何缩进列表元素中下一行的文本_Css - Fatal编程技术网

Css 如何缩进列表元素中下一行的文本

Css 如何缩进列表元素中下一行的文本,css,Css,我有一份无序的清单: <ul class="list_arrow2"> <li> <span style="display: inline-block; width: 150px; font-weight: bold;"> Signup Options </span>&ndash; &nbsp; Describe your signup options tha

我有一份无序的清单:

<ul class="list_arrow2">
    <li>
        <span style="display: inline-block; width: 150px; font-weight: bold;">
            Signup Options </span>&ndash; &nbsp; Describe your signup options 
            that an applicant can choose from. List the signup option type, 
            description, and price. For example, the two signup options might be 
            Customer or Distributor; each option would carry a different description 
            of cost and details.
    </li>
    <li>
        <span style="display: inline-block; width: 150px; font-weight: bold;">
            Order Options </span>&ndash; &nbsp; Indicate any additional purchase 
            options that an applicant may have. This may be in the form of a single 
            item or package item order. For example, you might want to give the 
            applicant a choice to purchase a "starter kit" that includes various 
            products that you sell. Be sure to list the details of these items, 
            including a description and price.
    </li>
    <li>
        <span style="display: inline-block; width: 150px; font-weight: bold;">
            Autoship Options </span>&ndash; &nbsp; This section can be exclusive 
            of the Order Options section or you can include both. The Autoship 
            section is just like the Order Options section except that the applicant 
            is agreeing to receive the order on an monthly, recurring basis. Be 
            sure to include descriptions, pricing, etc.
    </li>
    <li>
        <span style="display: inline-block; width: 150px; font-weight: bold;">
            Payment Options </span>&ndash; &nbsp; List the types of credit cards 
            you accept (Visa, M/C, AMEX, Diners). Also, if you intend on taking 
            personal checks online, or ACH, be sure to add this to your details. 
            If you plan on taking online checks, or ACH, please contact your Account 
            Manager for more details on getting this set up.
    </li>
    <li>
        <span style="display: inline-block; width: 150px; font-weight: bold;">
            Terms and Conditions</span>&ndash; &nbsp; Please provide the full text 
            of your terms and conditions and/or Distributor Agreement. This will 
            be displayed for the applicant to agree to before proceeding with 
            their registration.
    </li>
    <li>
        <span style="display: inline-block; width: 150px; font-weight: bold;">
            Confirmation Message </span>&ndash; &nbsp; Please provide us with 
            the text that is displayed once the applicant successfully signs up. 
            This text is also emailed to the new applicant.
    </li>
    <li>
        <span style="display: inline-block; width: 150px; font-weight: bold;">
            Welcome Message </span>&ndash; &nbsp; Please provide us with the text 
            that is displayed as an introduction to the applicant.
    </li>
</ul>

您可以缩进跨度,如()所示:

不过,更好的方法是设置悬挂缩进():


定义列表更适合您的需要。请参见此

HTML


注册选项
–描述申请人可以选择的注册选项
从…起列出注册选项类型、说明和价格。例如
两个注册选项可能是客户或经销商;每种选择都会带来好处
对成本和细节的不同描述
订单选项
–指出申请人需要的任何其他购买选项
可能有。这可以是单个项目或包装项目订单的形式。对于
例如,您可能想让申请人选择购买“初学者”
套件”,包括您销售的各种产品。一定要列出细节
包括说明和价格。
自动芯片选项
–此部分可能不包括订单选项部分
或者你可以把两者都包括在内。Autoship部分与订单选项类似
除申请人同意每月收到订单外,
经常性基础。确保包括说明、定价等。
支付选择
–列出您接受的信用卡类型(Visa、M/C、美国运通、,
食客)。此外,如果您打算在网上进行个人支票或ACH,请确保
将此添加到您的详细信息中。如果您计划接受在线支票或ACH,请
请与您的客户经理联系以获取有关设置的更多详细信息。
条款和条件
–请提供您的条款和条件的全文
和/或经销商协议。这将显示以供申请人同意
在继续进行注册之前,请将其删除。
确认信息
–请向我们提供一次显示的文本
申请人成功注册。此文本也通过电子邮件发送给新申请人。
欢迎辞
–请向我们提供作为介绍显示的文本
给申请人。

为什么不直接使用定义列表呢?@j08691可以坦率地说,我以前从未使用过定义列表。始终坚持或
    将研究该解决方案。值得一看。它们与有序列表和无序列表一样古老。是否可以使用此选项处理列表样式的图像?我用我试图复制的CSS编辑了OP。 Order Options - This is some text I am ugly over flowed text Order Options - This is some text I am pretty overflowed text!
    ul.list_arrow, ul.list_arrow2 {
        margin: 0px 0 15px 15px!important;
    }
    ul.list_arrow li {
        padding: 2px 2px 2px 0px;
        list-style-image: url(../images/icon/arrow_a.gif);
    }
    ul.list_arrow2 li {
        padding: 2px 2px 2px 0px;
        list-style-image:url(../images/icon/arrow.png)
    }
    
    dl.list_arrow, dl.list_arrow2 {
        margin: 0px 0 15px 15px!important;
    }
    dl.list_arrow dt {
        padding: 2px 2px 2px 0px;
        list-style-image: url(../images/icon/arrow_a.gif);
    }
    dl.list_arrow2 dt {
        padding: 2px 2px 2px 0px;
        list-style-image:url(../images/icon/arrow.png)
    }
    
    li {
      padding-left:150px;
    }
    
    li span {
      margin-left: -150px;
    }​
    
    li {
      margin-left:150px;
      text-indent:-150px;
    }
    
    <dl class="list_arrow2">
        <dt>Signup Options </dt>
        <dd>–&nbsp;&nbsp; Describe your signup options that an applicant can choose 
        from. List the signup option type, description, and price. For example, the 
        two signup options might be Customer or Distributor; each option would carry 
        a different description of cost and details</dd>
        <dt>Order Options </dt>
        <dd>–&nbsp;&nbsp; Indicate any additional purchase options that an applicant 
        may have. This may be in the form of a single item or package item order. For 
        example, you might want to give the applicant a choice to purchase a &quot;starter 
        kit&quot; that includes various products that you sell. Be sure to list the details 
        of these items, including a description and price. </dd>
        <dt>Autoship Options </dt>
        <dd>–&nbsp;&nbsp; This section can be exclusive of the Order Options section 
        or you can include both. The Autoship section is just like the Order Options 
        section except that the applicant is agreeing to receive the order on an monthly, 
        recurring basis. Be sure to include descriptions, pricing, etc. </dd>
        <dt>Payment Options </dt>
        <dd>–&nbsp;&nbsp; List the types of credit cards you accept (Visa, M/C, AMEX, 
        Diners). Also, if you intend on taking personal checks online, or ACH, be sure 
        to add this to your details. If you plan on taking online checks, or ACH, please 
        contact your Account Manager for more details on getting this set up. </dd>
        <dt>Terms and Conditions</dt>
        <dd>–&nbsp;&nbsp; Please provide the full text of your terms and conditions 
        and/or Distributor Agreement. This will be displayed for the applicant to agree 
        to before proceeding with their registration. </dd>
        <dt>Confirmation Message </dt>
        <dd>–&nbsp;&nbsp; Please provide us with the text that is displayed once the 
        applicant successfully signs up. This text is also emailed to the new applicant.
        </dd>
        <dt>Welcome Message </dt>
        <dd>–&nbsp;&nbsp; Please provide us with the text that is displayed as an introduction 
        to the applicant. </dd>
    </dl>