Question

我有一条带有白色半圆和双线文字的条纹，它应该在圆圈和条纹内侧。但它超越了国界。如果我将 span 应用于这些div，则不会发生任何变化。我该如何解决这个问题？

HTML

<div class="summarize">
  <div class="top-button">
    <span class="half-circle"></span>

    <div>First line</div>
    <div>Second line</div>
  </div>
</div>

CSS

.summarize {
  background-color: #B7B7B7;
}

.top-button {
  height: 10vh;
}

.half-circle {
  background: white;
  height: 100%;
  width: 20%;
  border-radius: 00px 50px 50px 0px;
  display: flex;
  align-items: center;
}

Answer 1

只需将float: left;提交给.half-circle

即可

.half-circle {
  background: white;
  height: 100%;
  width: 20%;
  border-radius: 00px 50px 50px 0px;
  display: flex;
  align-items: center;
  float: left;
}

<强> Working Fiddle

Answer 2

虽然添加float: left;的答案肯定有效，但这里有一个使用flexbox的选项。

我更喜欢flexbox的原因是因为它可以更容易正确对齐。

.summarize {
  background-color: #B7B7B7;
}

.top-button {
  height: 50px;
  display: flex;
  flex-direction: row;
  align-items: center;
}

.half-circle {
  background: #F0F0F0;
  height: 100%;
  width: 20%;
  border-radius: 00px 50px 50px 0px;
  display: block;
}
.text {
  flex: 1;
  padding-left: 15px;
}
.text span {
  display: block;
}

<div class="summarize">
  <div class="top-button">
    <div class="half-circle"></div>
    <div class="text">
      <span>line 1</span>
      <span>line 2</span>
    </div>
  </div>
</div>

Answer 3

使用少量标记实现所需目标的一种方法是使用绝对定位的pseudo-element，如下所示：

div{
  background-color:#b7b7b7;
  height:10vh;
  padding-left:calc(20% + 10px);
  /* Left padding should be at least the same width as the pseudo-element - I added 10px to create some space between it and the content */
  position:relative;
}
div::before{
  background:#fff;
  border-radius:0 50px 50px 0;
  bottom:0;
  content:"";
  left:0;
  position:absolute;
  top:0;
  width:20%;
}
/** Add the following if you want to center the children vertically in the parent **/
div{
  align-content:center;
  display:flex;
  flex-wrap:wrap;
}
p{
  flex:0 0 100%;
}
/** Presentational stuff for this Snippet **/
*{box-sizing:border-box;font-family:sans-serif;margin:0;padding:0;}
div{border:1px solid #999;margin:10px;}

<div>
  <p>First line</p>
  <p>Second line</p>
</div>

Answer 4

你没有正确使用flex，也没有在正确的位置使用。

如果你制作了一个圆圈和一个容纳文本sibbling的容器，它将很容易起作用：

＆＃13;

.summarize {
  background-color: #B7B7B7;
}
.top-button {
  height:3em;/* vh might not be the best idea ... */
  display: flex;
  align-items: center;
}
.half-circle {
  background: white;
  height: 100%;
  width: 20%;
  border-radius: 00px 50px 50px 0px;
}
p {
  margin: 0;
}

＆＃13;

<div class="summarize">
  <div class="top-button">
    <span class="half-circle"></span>
    <div>
      <p>
        First line</p>
      <p>
        Second line</p>
    </div>
  </div>
</div>

＆＃13;

https://jsfiddle.net/Loj4Lgkq/4/

增加容器高度？

＆＃13;

.summarize {
  background-color: #B7B7B7;
}
.top-button {
  height:10em;/* vh might not be the best idea ... */
  display: flex;
  align-items: center;
}
.half-circle {
  background: white;
  height: 100%;
  width: 20%;
  border-radius: 00px 50px 50px 0px;
}
p {
  margin: 0;
}

＆＃13;

<div class="summarize">
  <div class="top-button">
    <span class="half-circle"></span>
    <div>
      <p>
        First line</p>
      <p>
        Second line</p>
    </div>
  </div>
</div>

＆＃13;

Answer 5

＆lt; p＆gt;这将起作用：＆lt; / p＆gt; ＆lt; p＆gt;＆lt; div class =＆＃34; snippet＆＃34;数据琅=＆＃34; JS＆＃34;数据隐藏=＆＃34;假＆＃34;数据的控制台=＆＃34;真＆＃34;数据巴贝尔=＆＃34;假＆＃34;＆GT;＆＃13; ＆lt; div class =＆＃34; snippet-code＆＃34;＆gt;＆＃13; ＆lt; pre class =＆＃34; snippet-code-css lang-css prettyprint-override＆＃34;＆gt;＆lt; code＆gt; .summarize {＆＃13; background-color：＃B7B7B7;＆＃13; }＆＃13; .top-button {＆＃13; 身高：10vh;＆＃13; }＆＃13; .half-circle {＆＃13; 背景：白色;＆＃13; 身高：100％;＆＃13; 宽度：20％;＆＃13; border-radius：00px 50px 50px 0px;＆＃13; display：inline-block;＆＃13; align-items：center;＆＃13; }＆LT; /代码＆GT;＆LT; /预＆GT;＆＃13; ＆lt; pre class =＆＃34; snippet-code-html lang-html prettyprint-override＆＃34;＆gt;＆lt; code＆gt;＆lt; div class =＆＃34; summary＆＃34;＆gt;＆＃13; ＆lt; div class =＆＃34; top-button＆＃34;＆gt;＆＃13; ＆lt; span class =＆＃34; half-circle＆＃34;＆gt;＆lt; / span＆gt;＆＃13; ＆＃13; ＆lt; span＆gt;第一行＆lt; / span＆gt;＆＃13; ＆lt; span＆gt;第二行＆lt; / span＆gt;＆＃13; ＆LT; / DIV＆GT;＆＃13; ＆LT; / DIV＆GT;＆LT; /代码＆GT;＆LT; /预＆GT;＆＃13; ＆LT; / DIV＆GT;＆＃13; ＆LT; / DIV＆GT;＆＃13; ＆LT; / p为H.

如何将圆和文字放在一行？

5 个答案: