Css 如何缩进列表元素中下一行的文本
我有一份无序的清单:Css 如何缩进列表元素中下一行的文本,css,Css,我有一份无序的清单: <ul class="list_arrow2"> <li> <span style="display: inline-block; width: 150px; font-weight: bold;"> Signup Options </span>– Describe your signup options tha
<ul class="list_arrow2">
<li>
<span style="display: inline-block; width: 150px; font-weight: bold;">
Signup Options </span>– 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>– 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>– 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>– 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>– 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>– 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>– 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>– 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>– 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. </dd>
<dt>Autoship Options </dt>
<dd>– 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>– 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>– 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>– 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>– Please provide us with the text that is displayed as an introduction
to the applicant. </dd>
</dl>