Question

所以我有两个包含文本的div，我希望将它们水平放置。我尝试使用属性display: inline-block，但它似乎不起作用。这是我jsfiddle的尝试。

Answer 1

我认为你想要使用的是一个ul而不是div，这将允许你将它们全部放在同一行，如果这就是你的意思？

.row{
   list-style: none;
}

.row li{
    display: inline-block;
    padding: 0 10px;
}

<ul class="row">
     <li>A108 Adam Street</li>
     <li>New York, NY 535022</li>
     <li>info@exmaple.com</li>
</ul>

Answer 2

我认为这就是你想要的：

＆＃13;

.text{
 
  display: inline-block
}

.text1{
   float: left;  
}

.text2{
   float: right;  
}

＆＃13;

 <div >
              <div class="ion-ios-location-outline text text1">
                <i><p>A108 Adam Street<br>New York, NY 535022</p></i>
              </div>

              <div class="ion-ios-email-outline text text2">
                <i><p>info@example.com</p></i>
              </div>

            </div>

＆＃13;

如果正确，您可以回复进一步解释

Answer 3

div的默认值为display：block;它使div获得页面的全宽。所以如果你想让2个div保持水平。您应该将div的显示设置为inline-block;

div {
  display: inline-block;
}
.text{

  display: inline-block
}

.text1{
   float: left;  
}

.text2{
   float: right;  
}

Answer 4

只需为父div提供一个类并应用 text-align:center 属性

＆＃13;

.parent{
  text-align:center;
}

＆＃13;

 <div class='parent'>
              <div  >
                <i class="ion-ios-location-outline "></i>
                <p>A108 Adam Street<br>New York, NY 535022</p>
              </div>

              <div>
                <i class="ion-ios-email-outlinetext " ></i>
                <p>info@example.com</p>
              </div>

          

            </div>

＆＃13;

Answer 5

使用float财产：

.text {
  display: inline-block
}

.text1 {
  float: left;  
}

.text2 {
  float: right;  
}

div div:last-child { 
  float:right;
}

div div:first-child {
  float: left;
}

<div >
    <div>
        <i class="ion-ios-location-outline text text1"></i>
        <p>A108 Adam Street<br>New York, NY 535022</p>
    </div>

    <div>
        <i class="ion-ios-email-outlinetext text2" ></i>
        <p>info@example.com</p>
    </div>
</div>

Answer 6

默认情况下，div的display属性设置为＆＃34; block＆＃34;。因此，即使您将其子标记的display属性设置为＆＃34; inline-block＆＃34;，这也行不通。

将父div设置为＆＃34; inline-block＆＃34;相反可能是你需要的。

以下是供您参考的代码（您不需要text，text1和text2类。我已将您需要的类命名为＆＃34; display-inline-block＆＃34;）

            <div>
                <div class="display-inline-block">
                    <i class="ion-ios-location-outline"></i>
                    <p>A108 Adam Street<br>New York, NY 535022</p>
                </div>

                <div class="display-inline-block">
                    <i class="ion-ios-email-outline"></i>
                    <p>info@example.com</p>
                </div>
            </div>

以下css

.display-inline-block {
  display: inline-block;
}

P.S。你也可以使用bootstrap css class＆＃34; d-inline-block＆＃34;相反，如果你在项目中使用bootstrap，而不是定义自定义类＆＃34; display-inline-block＆＃34;。

水平对齐div不起作用

6 个答案: