相关疑难解决方法(0)

我想在这个图像中围绕一个圆圈中的数字:

这可能吗？它是如何实现的？

我有无限数量的100px宽度的div,可以放入250px宽度的父级.无论高度如何,我都需要将div显示在行中,如图所示.我已经尝试过解决这个问题,但div高度似乎搞砸了.

我非常感谢你的帮助.谢谢 :)

        <style>
            #holder{
            width:250px;
            border:1px dotted blue;
            display:inline-block;
        }
        .box{
            width:100px;
            height:150px;
            background-color:#CCC;
            float:left;
            text-align:center;
            font-size:45px;
            display:inline-block;
        }
        .one{
            background-color:#0F0;
            height:200px;
        }

        .two{
            background-color:#0FF;
        }

        .three{
            background-color:#00F;
        }

        .four{
            background-color:#FF0;
        }
    </style>

    <div id="holder">
        <div class="box one">1</div>
        <div class="box two">2</div>
        <div class="box three">3</div>
        <div class="box four">4</div>
    </div>

这是jsfiddle

这是我用javascript https://jsfiddle.net/8o0nwft9/所做和所取得的成就

我试图H2在HTML和CSS中创建一个漂亮的标题,这将允许我在实际的标题文本之前有一个很好的格式化数字,如下图所示:

图像中的示例使用如下所示的CSS代码并且它工作得很好,除了我无法在HTML中设置橙色圆圈中的数字值!

h2:before {
  content: "2";
  text-align: center;
  position: relative;
  display: inline-block;
  margin-right: 0.6em;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -ms-border-radius: 50%;
  -o-border-radius: 50%;
  border-radius: 50%;
  width: 1.6em;
  height: 1.6em;
  font-weight: 900;
  line-height: 1.6;
  color: #FFF;
  font-size: 1em;
  background: #F77621;
}

<h2>How to Get Detailed PPC Keyword Data</h2>

我的另一个尝试是将一个h2和span两个内部包裹起来div.跨度是数字圆圈:

.number-circles {
  margin-bottom: 0.4em;
}
.number-circles h2 {
  display: inline-block;
  font-size: 1.5em;
  text-transform: capitalize;
  line-height: 1.75em;
  color: #555;
}
.number-circles span.num {
  position: relative;
  display: …

我和许多其他人一样使用了CSS伪元素选择器,主要是说我已经使用过它们了.

但是我绞尽脑汁,努力想出一个与标记并列的理由.

请看以下示例:

    <p>Hello</p>

    p:after {
       content: "*";
    }

现在,使用它比使用<span>标签有什么好处？

我错过了:before和:after？是否有一些坚实的理由将它们用于预先存在的语义标记？

I need to create a set of list items where I need to style the list item numbers (decimals) with a border-radius and a background color.

Here is the snapshot of how I want my list items to look like.

I have tried to put a border radius, background on the li, but I was not able to get the output that I am lookin for.

Here is a WORKING LINK of what I have tried so far. I removed …

有什么方法可以删除列表样式中十进制数字后的点吗？

我的 CSS

.snum li {list-style:decimal outside none;}

我得到的结果是这样的（不包括 PHP 和 HTML 代码）

1. MILK
2. SOYA
3. BEANS
4. GARLIC

Desired Outpiut 应该是这样的。

1 MILK
2 SOYA
3 BEANS
4 GARLIC