代码之家 › 专栏 › 技术社区 › Alex

HTML+CSS(可能是Bootstrap框架)创建LI 1 2 3列表

list css html

-3

Alex · 技术社区 · 7 年前

很好的一天,

虽然我不知道它叫什么。

单击左上角的“创建帐户”按钮
填写数据
单击“完成”并享受乐趣

但是我想用HTML&来做这个;CSS和我都不知道如何描述这一点。

编辑,我看到一个负号。但我只是不知道如何用正确的英语命名,所以在网上找到答案对我来说是非常困难的。我找到了很多答案,但都偏离了我想要的。

我想把下面的代码变成上面的图片样式

<ol>
    <li>Go to our website</li>
    <li>Click on create account button in the left top corner</li>
    <li>Fill in your data</li>
    <li>Click finish and HAVE FUN</li>
</ol>

1 回复 | 直到 7 年前

C.RaysOfTheSun 7 年前

如果我理解正确的话,你想要这样的东西。我知道有个合适的方法。但是,希望有人能给你提供一个更好的例子。

我想把这个作为一个评论,以 fiddle

.vl {
    border-left: 2px solid #FF4500;
    height: 300px;
		transform: translatex(90px);
		position:absolute;
		z-index:-2;
}

.bullet-less {
	list-style:none;
}

.round-item {
	border: thin solid #FFA500;
	border-radius: 30px;
	padding: 20px;
	text-align:center;
	margin: 20px;
	width: 20px;
	font-weight:bold;
	background-color: #FFA500;
}

<div class="wrap">
	<div class="vl"></div>
	<ul class="bullet-less">
		<li class="round-item">1</li>
		<li class="round-item">2</li>
		<li class="round-item">3</li>
		<li class="round-item">4</li>
	</ul>
</div>