Question

我想要Text Left和Text right应该在同一行，我不能重组HTML。如果我使用绝对位置，我不知道它会因为黄色区域在不同的设备和屏幕尺寸中表现如何（）。我可以参考父div（ms-srch-result）

给出绝对位置

＆＃13;

#UpScopeLinkTop{

    display: block;
   float:right;

}

＆＃13;

<div class="ms-srch-result" id="Result" name="Control">  

   <div id="UpScopeLinkTop" class="ms-srch-upscope-top" style="display:block;width: 700px;">                        
   Text Right 
   </div>

   <div id="ResultCount" class="ms-srch-resultscount">                           
    Text Left                       

   </div>

</div>

＆＃13;

Answer 1

解决方案1：（删除内联样式）

＆＃13;

#UpScopeLinkTop{
   display: block;
   float:right;
}

＆＃13;

<div class="ms-srch-result" id="Result" name="Control">  
   <div id="UpScopeLinkTop" class="ms-srch-upscope-top">                        
   Text Right 
   </div>
   <div id="ResultCount" class="ms-srch-resultscount">                           
    Text Left      
   </div>
</div>

＆＃13;

解决方案2：（弹性框）

＆＃13;

.ms-srch-result{
	display: flex;
    flex-direction: row-reverse;
    width: 200px;
}
.ms-srch-result div{
	margin: 10px;
}

＆＃13;

<div class="ms-srch-result" id="Result" name="Control">  
   <div id="UpScopeLinkTop" class="ms-srch-upscope-top">                        
   Text Right 
   </div>
   <div id="ResultCount" class="ms-srch-resultscount">                           
    Text Left      
   </div>
</div>

＆＃13;

解决方案3：（flex属性）

＆＃13;

.ms-srch-result{
	display: flex;
    flex-direction: row-reverse;
}
.ms-srch-result div{
	flex: 1;
}

＆＃13;

<div class="ms-srch-result" id="Result" name="Control">  
   <div id="UpScopeLinkTop" class="ms-srch-upscope-top">                        
   Text Right 
   </div>
   <div id="ResultCount" class="ms-srch-resultscount">                           
    Text Left      
   </div>
</div>

＆＃13;

Answer 2

在CSS样式表中使用类似的内容：

#UpScopeLinkTop, #ResultCount {
  width: 45%;
}

（根据需要调整值）

P.S。：从#UpScopeLinkTop

的HTML标记中删除700px宽度

Answer 3

你不需要漂浮物。使用跨度而不是div中的div。

<div id="thebigdiv">
<span style="display:inline-block";>
Text left
</span>
<span style="display:inline-block";>
Text right
</span>
</div>

Answer 4

您需要更改<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <form> 1<input type="text" class="valid" /><br /> 2<input type="text" class="valid" /><br /> 3<input type="text" class="valid" /><br /> 4<input type="text" class="valid" /><br /> 5<input type="text" class="valid" /><br /> 6<input type="text" class="valid" /><br /> <input type="button" id="button1" value="Test Me!" disabled="disabled" /> </form>的{{1}}值

display

到

div

还需要从display: block;代码中删除内嵌样式。

您可以对包含文字的display: inline;元素应用相对定位。

＆＃13;

HTML

＆＃13;

div

＆＃13;

在第一个位置需要div以下

4 个答案: