Question

好的，我遇到了一个问题，我想在文本下划线，和/或在flex容器内的其他元素中添加其他样式。我遇到了问题：居中也无法按照我想要的方式工作。添加跨度会造成混乱。请阅读代码中的注释。如何添加其他样式并保持柔韧性而不弄乱？

#first
{
height: 527px;
background: url(img/gbackground.jpg) no-repeat;
background-size: cover;
justify-content: center;
align-items: center;
display: flex;
font: normal normal 30px/50px Times, serif;
}

<!-- I want to put a span around "View Our Services, but it ruins the flexbox,
I want the "View Our services" centered below the top 3 words: "Your Business Online" 
and with some space
on the left, I added some whitespace as a ghetto hack, but how can I add spans
so I can do extra cool things and not disrupt the flex? I also tried adding
a underline to the "-->
<div id="first" class="col">Your Business Online </br> &nbsp;&nbsp;View Our Services</div>

<!-- WTF? -->
<div id="first" class="col">Your Business Online </br> &nbsp;&nbsp;<span id="space">View Our Services</span></div>

？

Answer 1

向容器提供flex-direction: column。

标记更改：

使用.first类代替容器的ID。
从第二个容器中删除了换行标记。

看看，如果有帮助。

.first
{
height: 527px;
background: url(img/gbackground.jpg) no-repeat;
background-size: cover;
justify-content: center;
align-items: center;
display: flex;
font: normal normal 30px/50px Times, serif;
flex-direction: column;
}

<!-- I want to put a span around "View Our Services, but it ruins the flexbox,
I want the "View Our services" centered below the top 3 words: "Your Business Online" 
and with some space
on the left, I added some whitespace as a ghetto hack, but how can I add spans
so I can do extra cool things and not disrupt the flex? I also tried adding
a underline to the "-->
<div class="first" class="col">Your Business Online </br> &nbsp;&nbsp;View Our Services</div>

<!-- WTF? -->
<div class="first" class="col">Your Business Online  &nbsp;&nbsp;<span id="space">View Our Services</span></div>

Answer 2

请参阅下文。我记录了源代码中的更改。

<TextField 
  required={field.required} 
  invalid={field.canBeValidated && !!field.meta.error}
  onFocus={field.onFocus}
...

#first
{
height: 527px;
background: url(img/gbackground.jpg) no-repeat;
background-size: cover;
justify-content: center;
align-items: center;
display: flex;
flex-direction: column; /* change from row (default) */
font: normal normal 30px/50px Times, serif;
}

将样式应用于“ display：flex”中的<span>

2 个答案: