css - Align list items horizontally in adaptive design
问题描述
Please see the JSFiddle.
This is an adaptive design with "vw" parameters in the code. I want Text_1, Text_2 and Text_3 be aligned horizontally, which means that when i change the browser's window size, the distance from the left side of the screen to the beginning of the text is the same for those 3 words. With the current code I align them (via "margin" property), but as soon as the browser's window size changes, Text_2 and Text_3 move relatively to Text_1 (to the right when window size dicreases, to the left when it increases). What is wrong in the code please?
<div class="meaning">
<ol class="circle">
<li>Text_1</li>
<ul>
<li><span class="example">Text_2</span></li>
<li><span class="example_translated">Text_3</span></li>
</ul>
</ol>
</div>
.meanings_and_examples {
display: flex;
flex-direction: column;
}
.meaning {
font-family: Tahoma, Geneva, sans-serif;
width: auto;
text-align: left;
color: #1f2c60;
font-weight: 700;
word-wrap: break-word;
text-shadow: 0.06em 0.06em 0.09em rgba(0, 0, 0, 0.2);
margin-right: 1%;
font-size: calc(0.5em + 2.3vw);
}
ol.circle {
list-style-type: none;
}
li {
line-height: calc(1.1em + 1.5vw);
}
ol.circle > li {
counter-increment: item;
margin: 0% 0% 0.2% 1.3em;
}
ol.circle > li::before {
content: counter(item);
display: inline-block;
text-align: center;
border-radius: 100%;
width: calc(1.2em + 1.5vw);
background: #1f2c60;
color: white;
box-shadow: 0.06em 0.06em 0.09em rgba(0, 0, 0, 0.2);
margin: 0% 3.5% 0% -2.4em;
}
ul {
list-style-type: none;
}
.example {
width: auto;
text-align: left;
font-weight: 400;
}
.example_translated {
width: auto;
text-align: left;
font-weight: 400;
color: #5d78e5;
}
解决方案
我不确定在 ol 中插入 ul 有什么意义。但我认为如果不是强制性的,你应该单独使用它们,因为你正在枚举我所看到的相同类型的元素。
然后你的利润有几个问题:你的反对者有width: calc(1.2em + 1.5vw);
,但你的利润是margin: 0% 3.5% 0% -2.4em;
。
我猜这是通过尝试不同的值来实现的。
但是你的 couter 女巫width: calc(1.2em + 1.5vw);
正在将第一个元素从列表中推出。
因此,如果您希望列表项对齐,边距应该考虑。所以你的柜台应该有类似的边距margin: 0% 3.5% 0% calc(-3.5% - 1.2em - 1.5vw);
我在 这里做了一个工作示例。我不确定你是否想要这样,但你可以从这里开始。
但我不得不问:你真的需要一个和一个,或者你只是使用它们,这样你就可以在一些元素之前添加计数器?因为最好只使用一个类(用于计数器)并为所有元素使用一个单独的列表。
推荐阅读
- r - R 函数 getFilings() 说 2019 年和 2020 年 EDGAR 数据未找到
- android - 材质滑块错误拖动标签显示
- ubuntu - shell 命令是如何执行的,它们在什么上下文中运行?
- css - 为什么输入元素在 bootstrap col-auto 列中的呈现方式与 span 元素不同?
- python - 使用 Buildozer 创建 apk 文件的问题
- jar - 如何找到jar文件的jar依赖
- caching - 管道缓存设置问题
- java - Service 和 PeriodicWorkRequest() 的区别
- ionic-framework - 离子主题动态变化
- javascript - 如何用jquery制作一个新的div?