Разделители не горизонтально выровнены

Question

У меня есть два <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>

По моему мнению, он должен работать правильно. Но второй вид выглядит ниже первого <div>. Они неправильно выровнены.

Answer 1

Пожалуйста, смотрите ниже CSS, я только изменить запас правом в%, как вы даете ширину в%, но запас в пикселях.

.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 2

использование display:flex на родительском DIV https://jsfiddle.net/Lpjxse6L/

Answer 3

https://jsfiddle.net/k4wgd8gk/

Смотрите пример выше ..

вы упомянули атрибут неправильно.

<div className="info_label"> Является ли это правильный формат class атрибут

.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; 
 
    
 
}

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

Answer 4

это то, что вам нужно, я добавил 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 5

, когда я добавил CSS display: inline-block; к .info_label.info_data_labe & л из консоли я нашел его выглядеть как согласно вашему требованию,
Пожалуйста, проверьте это ,.

.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 6

.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> 

Это работает, как вы хотите, чувак!