Question

以下是我的简单html：

<!DOCTYPE html>
<html>
<head>
</head>
<body>

<span style="display:inline-block;width:49%;text-align:center"> some text</span>
                 <span style="display:inline-block;width:49%;text-align:center"> some text</span>

</body>
</html>

我希望将行划分为2个相等的空格/列，但是当我使用50％的宽度时，第二个跨度会转到下一行。

我做了什么？

将两个宽度固定为49％然后它正在工作，但我想要使用50％来平均分配空间。

我错过了什么？

Answer 1

使用Flex

＆＃13;

.wrap{
    display: flex;
    justify-content: center;
    align-items: center;
}

.block-a{
  width:50%;
  background:green;
  
}

.block-b{
  width:50%;
  background:gold;
  
}

＆＃13;

<div class="wrap">

<span class="block-a"> some text</span>
<span class="block-b"> some text</span>

</div>

＆＃13;

使用字段

＆＃13;

.block-a{
  width:50%;
  background:green;
  float:left;
  
}

.block-b{
  width:50%;
  background:gold;
   float:right;
}

＆＃13;

<div class="wrap">

<span class="block-a"> some text</span>
<span class="block-b"> some text</span>

</div>

＆＃13;

Answer 2

添加float:left

选中此JSFiddle

使用两个跨度

2 个答案: