Question

我有两个443，我正在尝试水平对齐它们。但是存在一些对齐问题。我该如何解决这个问题？

<div>

.info {
  margin-top: 50px;
  padding-left: 1%;
  font-size: 12px;
  position: absolute;
}
.info_label {
  margin-right: 15px;
  margin-bottom: 10px;
  width: 40%;
  padding: 0;
  float: left;
  background-color: yellow;
  position: relative;
}
.info_data_label {
  margin-right: 10px;
  margin-bottom: 10px;
  width: 50%;
  padding: 0;
  background-color: yellow;
  float: right;
  position: relative;
}
.j {
  float: left;
}

根据我的观点，它应该正常工作。但第二个视图显示为第一个<div className="info"> <div> <div className="info_label"> <label className="j">Gender</label> </div> <div className="info_data_label"> <label className="j">Male</label> </div> </div> <br/> <div> <div className="info_label"> <label className="j">Birthday</label> </div> <div className="info_data_label"> <label className="j">1992-05-23</label> </div> </div> <br/> </div>。它们没有正确对齐。

Answer 1

.info {
  margin-top: 50px;
  padding-left: 1%;
  font-size: 12px;
  display : inline;

.j {
  float: left;
}

<div className="info" >
      <div className="info" >
      <label className="j">Gender</label>
      <label className="j">Male</label> <br/>
      <label className="j">Birthday</label>
      <label className="j">1992-05-23</label>
</div>

这就像你想要的那样工作！

Answer 2

请参阅下面的CSS，我只将margin-right更改为％，因为您以％为单位给出宽度，但以像素为单位给出边距。

.info {
  margin-top: 50px;
  padding-left: 1%;
  font-size: 12px;
  position: absolute;
}
.info_label {
  margin-right: 5%;
  margin-bottom: 10px;
  width: 40%;
  padding: 0;
  float: left;
  background-color: yellow;
  position: relative;
}
.info_data_label {
  margin-right: 5%;
  margin-bottom: 10px;
  width: 50%;
  padding: 0;
  background-color: yellow;
  float: right;
  position: relative;
}
.j {
  float: left;
}

Answer 3

这就是您所需要的，我添加了display:inline-block和text-align:center;

.info {
   margin-top: 50px;
   padding-left: 1%;
   font-size: 12px;
   text-align:center;
}
.info_label {
   margin-right: 15px;
   margin-bottom: 10px;
   padding: 0;
   display:inline-block;
   background-color: yellow;
}
.info_data_label {
   margin-right: 10px;
   margin-bottom: 10px;
   padding: 0;
   background-color: yellow;
   display:inline-block;

}

https://jsfiddle.net/k4wgd8gk/1/

Answer 4

当我将CSS display: inline-block;添加到.info_label＆amp;来自控制台的.info_data_labe l 我发现它看起来像你的要求，
请检查一下。

.info_label {
      margin-right: 15px;
      margin-bottom: 10px;
      width: 40%;
      padding: 0;
      float: left;
      background-color: yellow;
      position: relative;
      display: inline-block;
}
.info_data_label {
      margin-right: 10px;
      margin-bottom: 10px;
      width: 50%;
      padding: 0;
      background-color: yellow;
      float: right;
      position: relative;
      display: inline-block;
}

Answer 5

在父div [{3}}

上使用display:flex

Answer 6

https://jsfiddle.net/k4wgd8gk/

参见上面的例子..

你被提到属性错误。

public class SelectedItemTransferConverter : IValueConverter { public object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture) { if (value is bool || value is bool?) { if ((bool?)value == false) { return null; } } return Binding.DoNothing; } public object ConvertBack(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture) { if (targetType == typeof(bool) || targetType == typeof(bool?)) { return value != null; } return Binding.DoNothing; } }这是正确的格式<div className="info_label">属性

＆＃13;

class

＆＃13;

.info {
  margin-top: 50px;
  padding-left: 1%;
  font-size: 12px;
 }
.info_label {
  margin-right: 15px;
  margin-bottom: 10px;
  padding: 0;
  float: left;
  background-color: yellow;
}
.info_data_label {
  margin-right: 10px;
  margin-bottom: 10px;
   padding: 0;
  background-color: yellow;
  
}

＆＃13;

Div不是水平对齐的

6 个答案: