Question

我有一个http://my-corporate-care.herokuapp.com/users/unlock?unlock_token=YKBToxBnBYhfbtrC_5XH标记，其中有两个<a>标记浮动，左右，内容位于中心。如何将内容包装到中心？浮动span标记及其宽度后，内容应采用剩余宽度。 注意：：我无法为文本添加span容器。

HTML：

span

CSS：

<a class="container">
    <span class="right"></span>
    hello how are you
    <span class="left"></span>
</a>

DEMO:

Answer 1

Flexbox可以做到这一点

＆＃13;

.container {
  width: 50%;
  margin: auto;
  height: 200px;
  border: 1px solid;
  display: flex;
  text-align: center;
  justify-content: space-between;
}
.left {
  width: 50px;
  height: 200px;
  background: red;
}
.right {
  height: 200px;
  width: 100px;
  background: blue;
}

＆＃13;

<a class="container">
  <span class="right"></span>
  hello how are you
  <span class="left"></span>
</a>

＆＃13;

Answer 2

重新排列HTML，首先是浮动元素，然后是文本：

.container {
    width:200px;
    height:200px;
    border:1px solid;
    display:block;


}
.left {
    width:50px;
    height:200px;
    background:red;

    float:left;
}
.right {
    height:200px;
    width:100px;
    background:blue;
    float:right;

}

<a class="container">
    <span class="right"></span>
    <span class="left"></span>
    hello how are you
</a>

Answer 3

您的问题是文本后面留下了跨度，因此跨度显示在文本下方。试试这个HTML代码：

<a class="container">
  <span class="right"></span>
  <span class="left"></span>
  hello how are you
</a>

如何包装中心内容并使其占用div的剩余宽度

3 个答案: