Flexbox:带有两行链接断开的跨度

时间:2016-04-30 12:15:09

标签: html css css3 flexbox

问题在于,在<object-to-string-transformer name="Object_to_String" doc:name="Object to String"/> <flow name="soapServiceFlow"> <http:listener config-ref="SOAP_JMS_HTTP_Listener_Configuration" path="/soap" doc:name="HTTP"/> <cxf:proxy-service configuration-ref="CXF_Configuration" doc:name="CXF" payload="envelope" wsdlLocation="service.wsdl" namespace="http://www.examples.com/wsdl/ReportService" port="ReportPort" service="ReportService" /> <logger message="#[payload]" level="INFO" doc:name="Logger"/> <jms:outbound-endpoint queue="my.requests" connector-ref="Active_MQ" doc:name="JMS" transformer-refs="Object_to_String"> <jms:transaction action="NONE"/> </jms:outbound-endpoint> </flow> 内部的跨度在两条线上断开。这是代码:

a link

这个css:

 <div id="formvox">
   <span>
     <span id="momentaneo"><i aria-hidden="true" class="fa fa-cog fa-spin fa-3x fa-fw"></i> Caricamento in corso...</span>
     <span id="force">Prova ad attendere qualche minuto altrimenti <a href="#">iscriviti di nuovo</a></span>
   </span>
 </div>

这是jsfiddle: https://jsfiddle.net/ek7z718n/

我不明白为什么如果窗口的宽度非常小,跨度#formvox { display: flex; flex-direction: column; height: auto; justify-content: center; } #momentaneo { align-items: center; display: flex; height: 100%; justify-content: center; width: 100%; } #force { display: flex; justify-content: center; } 会在两行上断开。也许问题是#force? 我多次尝试解决它但没有...

2 个答案:

答案 0 :(得分:0)

display:flex;范围内的问题为#force

之所以发生这种情况是因为跨度试图将所有孩子都放在一行上,因此a不会进入下一行。

答案 1 :(得分:0)

它被强制转到下一行,因为#momentaneo的宽度为100%所以它占用了完整的父宽度,然后是另一个元素(如果强制到下一行)

您可以更改宽度:100%到最大宽度:100%