Question

我正在尝试设计一个类似于

的列表项

如果颜色在左侧，则其余部分为白色。

我不知道从哪里开始，所以经过反复试验后我使用CSS选择器::before取得了进展，但它并不完全存在，我不知道如何完成这个

我的代码很简单

<ul>
<li>me</li>
</ul>

CSS

ul li{
  background-color:#fff;
}

ul li::before{
  content: "\00a0\00a0";
  display:inline;
  background-color:blue;
}

文字me太过悲伤了。这很麻烦，不得不为每个空格添加“\ 00a0”

https://jsfiddle.net/s8fj6huh/

Answer 1

在position:absolute;上使用::before，并为li部分padding-left提供::before的宽度ul{ list-style:none; } ul li{ background-color:#fff; padding-left:20px; position:relative; } ul li::before{ content: ' '; display:inline; width:20px; height:100%; position:absolute; left:0; background-color:blue; }

<ul>

<li>me</li>
</ul>

ngModel

Answer 2

您可以在父元素上添加position: relative，在伪元素上添加position: absolute。您还可以在padding-left上添加li，即＆gt; =然后是伪元素的宽度。

ul {
  list-style: none;
}
ul li {
  background-color: #fff;
  position: relative;
  padding-left: 55px;
}
ul li::before {
  content: '';
  height: 100%;
  width: 50px;
  left: 0;
  position: absolute;
  background-color: blue;
}

<ul>
  <li>me</li>
</ul>

您也可以使用Flexbox，因此您只需在display: flex上设置li。

ul {
  list-style: none;
}
ul li {
  background-color: #fff;
  display: flex;
}
ul li::before {
  content: '';
  width: 50px;
  background-color: blue;
}

<ul>
  <li>me</li>
</ul>

Answer 3

你也可以保留你的其他东西，并使用填充+渐变。

＆＃13;

ul {
  list-style: none;
}
ul li {
  background-color: #fff;
  padding: 1em 1em 1em 45px;
  background-image: linear-gradient(to right, #FFA46F 40px, transparent 40px);
  margin: 5px;
  box-shadow: 1px 1px 3px
}
ul li:nth-child(2n) {
  background-image: linear-gradient(to right, #FE62AC 40px, transparent 40px);
}
ul li:nth-child(3n) {
  background-image: linear-gradient(to right, #E7ED69 40px, transparent 40px);
  background-color: #def
}
ul li:nth-child(4n) {
  background-image: linear-gradient(to right, #59CD6A 40px, transparent 40px);
}
ul li:nth-child(5n) {
  background-image: linear-gradient(to right, #0C96EE 40px, transparent 40px);
}

＆＃13;

<ul>
  <li>me</li>
  <li>You
    <br/>&
    <br/>me</li>
  <li>me</li>
  <li>You
    <br/>&
    <br/>me</li>
  <li>me</li>
  <li>You
    <br/>&
    <br/>me</li>
  <li>me</li>
  <li>You
    <br/>&
    <br/>me</li>
  <li>me</li>
  <li>You
    <br/>&
    <br/>me</li>
  <li>me</li>
  <li>You
    <br/>&
    <br/>me</li>
  <li>me</li>
  <li>You
    <br/>&
    <br/>me</li>
</ul>

＆＃13;

Answer 4

CSS：

protected void bremove_Click(object sender, EventArgs e)
{
    Button remove = (Button)sender;
    DataListItem row = remove.NamingContainer as DataListItem;
    DataList dat = (DataList)row.FindControl("DataList3");
    Label qty = (Label)dat.FindControl("lblQuantity");
    Label id = (Label)row.FindControl("lblOrderID");
    string oid = id.Text;
    string oqty = qty.Text;
    sqlqueries.UpdateOrder(oid, oqty);
    int k = sqlqueries.CancelOrder(oid);
    if (k != 0)
    {
        Response.Redirect(Request.RawUrl);
    }
}

HTML：

ul.a {
list-style-type: circle;
background: blue;
}

无法使用蓝色框创建列表项

4 个答案: