居中对齐 <dl> 及其子元素
Center aligning <dl> and its child elements
我有一个简单的 <dl>
元素,其中包含一些子 <dt>
和 <dd>
标签。在 Fiddle 中,您会看到正常的布局,但对于移动设备,我试图让元素看起来像它们上面有 text-align: center
。他们应该显示 2-a-side 但总体上应该看起来居中。
我试过将子元素设置为 display: inline-block
,父元素 text-align: center
,但我不知道如何将每对中的第一个 "pushing"新队。希望我已经解释得够清楚了...
请看一下 Fiddle 并提出任何建议,谢谢。
可能值得先检查一下:
如果这不可能,可能的解决方法是:
dt{
text-align:right;
}
dd{
text-align:left;
}
dt, dd{
background:red;
float:left;
display:inline-block;
width:50%;
}
我删除了所有浮动并添加了
.data_table dd:after {
content: '';
display: block;
}
现在您可以在 @media
部分设置 text-align: center
:
body {
text-align: center;
}
.data_table {
display: inline-block;
overflow: hidden;
text-align: left;
background: #efefef;
padding: 10px;
width: 300px;
}
.data_table dt, .data_table dd {
margin: 0;
margin-bottom: 2px;
display: inline;
}
.data_table dt {
padding-right: 8px;
}
.data_table dd:after {
content: '';
display: block;
}
@media (max-width: 600px){
.data_table {
text-align: center;
}
}
<dl class="data_table">
<dt>One:</dt>
<dd>Value 1</dd>
<dt>Two:</dt>
<dd>Value 2</dd>
<dt>Three:</dt>
<dd>Value 3</dd>
<dt>Four:</dt>
<dd>Value 4</dd>
</dl>
尚不完全清楚您想要什么,但我认为这就是您想要的外观:
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
text-align: center;
}
.data_table {
display: inline-block;
overflow: hidden;
text-align: left;
background: #efefef;
padding: 10px;
width: 300px;
}
.data_table dt,
.data_table dd {
margin-bottom: 2px;
float: left;
width: 50%;
}
.data_table dt {
clear: both;
text-align: right;
}
<dl class="data_table">
<dt>One:</dt>
<dd>Value 1</dd>
<dt>Two:</dt>
<dd>Value 2</dd>
<dt>Three:</dt>
<dd>Value 3</dd>
<dt>Four:</dt>
<dd>Value 4</dd>
</dl>
我有一个简单的 <dl>
元素,其中包含一些子 <dt>
和 <dd>
标签。在 Fiddle 中,您会看到正常的布局,但对于移动设备,我试图让元素看起来像它们上面有 text-align: center
。他们应该显示 2-a-side 但总体上应该看起来居中。
我试过将子元素设置为 display: inline-block
,父元素 text-align: center
,但我不知道如何将每对中的第一个 "pushing"新队。希望我已经解释得够清楚了...
请看一下 Fiddle 并提出任何建议,谢谢。
可能值得先检查一下:
如果这不可能,可能的解决方法是:
dt{
text-align:right;
}
dd{
text-align:left;
}
dt, dd{
background:red;
float:left;
display:inline-block;
width:50%;
}
我删除了所有浮动并添加了
.data_table dd:after {
content: '';
display: block;
}
现在您可以在 @media
部分设置 text-align: center
:
body {
text-align: center;
}
.data_table {
display: inline-block;
overflow: hidden;
text-align: left;
background: #efefef;
padding: 10px;
width: 300px;
}
.data_table dt, .data_table dd {
margin: 0;
margin-bottom: 2px;
display: inline;
}
.data_table dt {
padding-right: 8px;
}
.data_table dd:after {
content: '';
display: block;
}
@media (max-width: 600px){
.data_table {
text-align: center;
}
}
<dl class="data_table">
<dt>One:</dt>
<dd>Value 1</dd>
<dt>Two:</dt>
<dd>Value 2</dd>
<dt>Three:</dt>
<dd>Value 3</dd>
<dt>Four:</dt>
<dd>Value 4</dd>
</dl>
尚不完全清楚您想要什么,但我认为这就是您想要的外观:
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
text-align: center;
}
.data_table {
display: inline-block;
overflow: hidden;
text-align: left;
background: #efefef;
padding: 10px;
width: 300px;
}
.data_table dt,
.data_table dd {
margin-bottom: 2px;
float: left;
width: 50%;
}
.data_table dt {
clear: both;
text-align: right;
}
<dl class="data_table">
<dt>One:</dt>
<dd>Value 1</dd>
<dt>Two:</dt>
<dd>Value 2</dd>
<dt>Three:</dt>
<dd>Value 3</dd>
<dt>Four:</dt>
<dd>Value 4</dd>
</dl>