在自适应设计中水平对齐列表项
Align list items horizontally in adaptive design
请参阅JSFiddle。
这是一个自适应设计,代码中有 "vw" 个参数。我想要 Text_1、Text_2 和 Text_3水平对齐,这意味着当我更改浏览器的 window 大小时,这 3 个词从屏幕左侧到文本开头的距离相同。使用 current 代码,我将它们对齐(通过 "margin" 属性),但是一旦浏览器的 window 大小发生变化,Text_2并且 Text_3 相对于 Text_1 移动(当 window 大小减小时向右移动,当它增加时向左移动)。请问代码有什么问题?
<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 有什么意义。但我认为如果不是强制性的,你应该单独使用它们,因为你正在枚举我所看到的相同类型的元素。
然后你的边距有几个问题:你的conter有width: calc(1.2em + 1.5vw);
但是你的边距是margin: 0% 3.5% 0% -2.4em;
。
我猜这是通过尝试不同的值来实现的。
但是您的计算机 width: calc(1.2em + 1.5vw);
正在将第一个元素推出列表。
所以边距应该考虑如果你想让列表项对齐。所以你的柜台应该有像 margin: 0% 3.5% 0% calc(-3.5% - 1.2em - 1.5vw);
这样的边距
我做了一个工作示例 here。我不确定你是否想要这样,但你可以从这里开始。
但我不得不问:
你真的需要一个和一个,还是你只是使用它们,这样你就可以在计数器的一些元素之前添加?因为最好只使用 class(用于计数器)并对所有元素使用单个列表。
好的,你有很多事情要做,对于你的下一个问题,我会删除示例不需要的任何代码的 fiddle,所有样式等等。
接下来你一起使用了太多的动态宽度,正如 Paulie_D 所说,除了 li-tags 之外,你不能在 ul-标签或 ol-标签。
主要问题是您有两个列表,一个在另一个列表中,其中填充非常动态,我尝试更改它,使填充与项目符号的动态宽度相匹配。
我保留了您的 HTML 并更改了一些 CSS,因此它的行为符合您的要求,但您真的应该考虑一个新的 HTML 设置。
.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;
border: 2px solid purple;
position: relative;
padding-left: 10vw;
}
li {
line-height: calc(1.1em + 1.5vw);
}
ol.circle > li {
counter-increment: item;
margin: 0% 0% 0.2% 0;
border: 2px solid orange;
padding: 0;
position: relative;
}
ol.circle > li::before {
content: counter(item);
display: inline-block;
text-align: center;
border-radius: 100%;
position: absolute;
background: #1f2c60;
color: white;
box-shadow: 0.06em 0.06em 0.09em rgba(0, 0, 0, 0.2);
width: calc(1.2em + 1.5vw);
transform: translateX(-100%);
}
ul {
list-style-type: none;
padding-left: 0;
border: 2px solid red;
}
.example {
width: auto;
text-align: left;
font-weight: 400;
}
.example_translated {
width: auto;
text-align: left;
font-weight: 400;
color: #5d78e5;
}
<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>
See my modified fiddle 表示您要求的行为。
请参阅JSFiddle。
这是一个自适应设计,代码中有 "vw" 个参数。我想要 Text_1、Text_2 和 Text_3水平对齐,这意味着当我更改浏览器的 window 大小时,这 3 个词从屏幕左侧到文本开头的距离相同。使用 current 代码,我将它们对齐(通过 "margin" 属性),但是一旦浏览器的 window 大小发生变化,Text_2并且 Text_3 相对于 Text_1 移动(当 window 大小减小时向右移动,当它增加时向左移动)。请问代码有什么问题?
<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 有什么意义。但我认为如果不是强制性的,你应该单独使用它们,因为你正在枚举我所看到的相同类型的元素。
然后你的边距有几个问题:你的conter有width: calc(1.2em + 1.5vw);
但是你的边距是margin: 0% 3.5% 0% -2.4em;
。
我猜这是通过尝试不同的值来实现的。
但是您的计算机 width: calc(1.2em + 1.5vw);
正在将第一个元素推出列表。
所以边距应该考虑如果你想让列表项对齐。所以你的柜台应该有像 margin: 0% 3.5% 0% calc(-3.5% - 1.2em - 1.5vw);
我做了一个工作示例 here。我不确定你是否想要这样,但你可以从这里开始。
但我不得不问: 你真的需要一个和一个,还是你只是使用它们,这样你就可以在计数器的一些元素之前添加?因为最好只使用 class(用于计数器)并对所有元素使用单个列表。
好的,你有很多事情要做,对于你的下一个问题,我会删除示例不需要的任何代码的 fiddle,所有样式等等。 接下来你一起使用了太多的动态宽度,正如 Paulie_D 所说,除了 li-tags 之外,你不能在 ul-标签或 ol-标签。
主要问题是您有两个列表,一个在另一个列表中,其中填充非常动态,我尝试更改它,使填充与项目符号的动态宽度相匹配。
我保留了您的 HTML 并更改了一些 CSS,因此它的行为符合您的要求,但您真的应该考虑一个新的 HTML 设置。
.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;
border: 2px solid purple;
position: relative;
padding-left: 10vw;
}
li {
line-height: calc(1.1em + 1.5vw);
}
ol.circle > li {
counter-increment: item;
margin: 0% 0% 0.2% 0;
border: 2px solid orange;
padding: 0;
position: relative;
}
ol.circle > li::before {
content: counter(item);
display: inline-block;
text-align: center;
border-radius: 100%;
position: absolute;
background: #1f2c60;
color: white;
box-shadow: 0.06em 0.06em 0.09em rgba(0, 0, 0, 0.2);
width: calc(1.2em + 1.5vw);
transform: translateX(-100%);
}
ul {
list-style-type: none;
padding-left: 0;
border: 2px solid red;
}
.example {
width: auto;
text-align: left;
font-weight: 400;
}
.example_translated {
width: auto;
text-align: left;
font-weight: 400;
color: #5d78e5;
}
<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>
See my modified fiddle 表示您要求的行为。