多重切换列表-如何右对齐标签和左切换标签

Question

我有一个多切换面板，其中需要三个切换对齐。文本应右对齐(从中心开始(，开关应左对齐(从中央开始(。这样，无论标签字符串有多长，所有切换都应该保持对齐

@import url("https://fonts.googleapis.com/css?family=Roboto");
body {
font: normal normal normal 1rem/1 'Roboto';
color: black;
}
.wrapper {
display: table;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 17.5rem;
padding: 0;
background: transparent;
border-radius: 0;
text-align: center;
margin: auto;
overflow: hidden;
z-index: 100;
}
.wrapper .content {
padding: 1.5rem 1.5rem 1rem;
}
.wrapper .header {
display: block;
font-size: 1.25rem;
text-align: center;
color: rgba(0, 0, 0, 0.84);
margin: 0;
padding: 0;
transition: color 0.56s cubic-bezier(0.4, 0, 0.2, 1);
}
.wrapper ul {
display: block;
padding: 0;
width: 100%;
}
.wrapper ul li {
display: block;
padding: 1rem 0 0;
}
.wrapper ul li p {
display: inline-block;
line-height: 1.5rem;
margin: 0 1.25rem 0;
vertical-align: middle;
transition: color 0.56s cubic-bezier(0.4, 0, 0.2, 1);
}
.switch {
display: inline-block;
position: relative;
width: 2.5rem;
height: 1rem;
border-radius: 0.5rem;
background: rgba(0, 0, 0, 0.26);
transition: background 0.28s cubic-bezier(0.4, 0, 0.2, 1);
vertical-align: middle;
cursor: pointer;
}
.switch::before {
content: '';
position: absolute;
top: -0.25rem;
left: -0.25rem;
width: 1.5rem;
height: 1.5rem;
background: #fafafa;
box-shadow: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.28);
border-radius: 50%;
transition: left 0.28s cubic-bezier(0.4, 0, 0.2, 1), background 0.28s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.28s cubic-bezier(0.4, 0, 0.2, 1);
}
.switch:active::before {
box-shadow: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.28), 0 0 0 1.25rem rgba(128, 128, 128, 0.1);
}
input:checked+.switch {
background: rgba(139, 195, 74, 0.5);
}
input:checked+.switch::before {
left: 1.25rem;
background: #8bc34a;
}
input:checked+.switch:active::before {
box-shadow: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.28), 0 0 0 1.25rem rgba(139, 195, 74, 0.2);
}

<div class="wrapper">
<div class="content">
<p class="header">Options</p>
<ul>
<li>
<p>Status</p>
<input id="test" type="checkbox" hidden="hidden" />
<label class="switch" for="test"></label>
</li>
<li>
<p>User</p>
<input id="test1" type="checkbox" hidden="hidden" />
<label class="switch" for="test1"></label>
</li>
<li>
<p>Department</p>
<input id="test2" type="checkbox" hidden="hidden" />
<label class="switch" for="test2"></label>
</li>
</ul>
</div>
</div>

JS Fiddle：https://jsfiddle.net/bentham7246/gx0cp157/5/

Answer 1

尝试利用flexbox来获得您想要的布局。包裹<p>并在其他容器中切换，以确保它们的容器始终为50%的宽度，从而占用相同的空间，然后将<p>与text-align对齐并切换，从而使它们彼此相邻

@import url("https://fonts.googleapis.com/css?family=Roboto");
body {
font: normal normal normal 1rem/1 'Roboto';
color: black;
}
.wrapper {
display: table;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 17.5rem;
padding: 0;
background: transparent;
border-radius: 0;
text-align: center;
margin: auto;
overflow: hidden;
z-index: 100;
}
.wrapper .content {
padding: 1.5rem 1.5rem 1rem;
}
.wrapper .header {
display: block;
font-size: 1.25rem;
text-align: center;
color: rgba(0, 0, 0, 0.84);
margin: 0;
padding: 0;
transition: color 0.56s cubic-bezier(0.4, 0, 0.2, 1);
}
.wrapper ul {
display: block;
padding: 0;
width: 100%;
}
.wrapper ul li {
display: block;
padding: 1rem 0 0;
}
.wrapper ul li p {
display: inline-block;
line-height: 1.5rem;
margin: 0 1.25rem 0 0;
vertical-align: middle;
transition: color 0.56s cubic-bezier(0.4, 0, 0.2, 1);
}
.switch {
display: inline-block;
position: relative;
width: 2.5rem;
height: 1rem;
border-radius: 0.5rem;
background: rgba(0, 0, 0, 0.26);
transition: background 0.28s cubic-bezier(0.4, 0, 0.2, 1);
vertical-align: middle;
cursor: pointer;
}
.switch::before {
content: '';
position: absolute;
top: -0.25rem;
left: -0.25rem;
width: 1.5rem;
height: 1.5rem;
background: #fafafa;
box-shadow: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.28);
border-radius: 50%;
transition: left 0.28s cubic-bezier(0.4, 0, 0.2, 1), background 0.28s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.28s cubic-bezier(0.4, 0, 0.2, 1);
}
.switch:active::before {
box-shadow: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.28), 0 0 0 1.25rem rgba(128, 128, 128, 0.1);
}
input:checked+.switch {
background: rgba(139, 195, 74, 0.5);
}
input:checked+.switch::before {
left: 1.25rem;
background: #8bc34a;
}
input:checked+.switch:active::before {
box-shadow: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.28), 0 0 0 1.25rem rgba(139, 195, 74, 0.2);
}
/* New CSS */
.wrapper ul li {
display: flex;
justify-content: center;
}
.name-container,
.switch-container {
flex: 0 0 50%;
max-width: 50%;
}
.name-container {
text-align: right;
}
.switch-container {
text-align: left;
}

<div class="wrapper">
<div class="content">
<p class="header">Options</p>
<ul>
<li>
<div class="name-container">
<p>Status</p>
</div>
<div class="switch-container">
<input id="test" type="checkbox" hidden="hidden" />
<label class="switch" for="test"></label>
</div>
</li>
<li>
<div class="name-container">
<p>User</p>
</div>
<div class="switch-container">
<input id="test1" type="checkbox" hidden="hidden" />
<label class="switch" for="test1"></label>
</div>
</li>
<li>
<div class="name-container">
<p>Department</p>
</div>
<div class="switch-container">
<input id="test2" type="checkbox" hidden="hidden" />
<label class="switch" for="test2"></label>
</div>
</li>
</ul>
</div>
</div>