blocks|key|3133606|text|我第一次误解了你的问题。您应该在初始目录中添加float:left;，并确保将clear:both;添加到它们下面的目录中。如果希望文本居中，则需要在初始div上设置宽度。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|3133607|HTML|BOLD|3133608|<div+id="container">
++++<div+id="content">
++++++++asdfaskjdfakjsd
++++</div>
++++<div+id="containerButton">
++++++++<input+type='submit'+value='asdf'+/>
++++</div>+++
</div>
<div+class="clear">asdfaskjdfakjsd</div>|code-block|syntax|javascript|3133609|CSS：|3133610|#container+{
++++width:300px;+++
}

#content+{++++
++++float:left;
++++text-align:center;+
++++width:90%25;
}

#containerButton+{
++++text-align:right;
​}

.clear+{
++++clear:both;
​}​|3133611|Live+DEMO|3133612|entityMap|0|LINK|mutability|MUTABLE|url|http://jsfiddle.net/pP285/9/^0|N|B|13|B|0|0|4|0|0|0|0|0|9|0|0^^$0|@$1|2|3|4|5|6|7|11|8|@$9|12|A|13|B|C]|$9|14|A|15|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|16|8|@$9|17|A|18|B|H]]|D|@]|E|$]]|$1|I|3|J|5|K|7|19|8|@]|D|@]|E|$L|M]]|$1|N|3|O|5|6|7|1A|8|@]|D|@]|E|$]]|$1|P|3|Q|5|K|7|1B|8|@]|D|@]|E|$L|M]]|$1|R|3|S|5|6|7|1C|8|@]|D|@$9|1D|A|1E|1|1F]]|E|$]]|$1|T|3|-4|5|6|7|1G|8|@]|D|@]|E|$]]]|U|$V|$5|W|X|Y|E|$Z|10]]]]

<p>I misunderstood your question the first time. You should add <code>float:left;</code> on your initial div and also make sure to add <code>clear:both;</code> to the div below them. If you want the text to be centered, you need to have a width on the initial div.</p>

<p><strong>HTML</strong>:</p>

<pre><code>&lt;div id="container"&gt;
    &lt;div id="content"&gt;
        asdfaskjdfakjsd
    &lt;/div&gt;
    &lt;div id="containerButton"&gt;
        &lt;input type='submit' value='asdf' /&gt;
    &lt;/div&gt;   
&lt;/div&gt;
&lt;div class="clear"&gt;asdfaskjdfakjsd&lt;/div&gt;
</code></pre>

<p>CSS:</p>

<pre><code>#container {
    width:300px;   
}

#content {    
    float:left;
    text-align:center; 
    width:90%;
}

#containerButton {
    text-align:right;
​}

.clear {
    clear:both;
​}​
</code></pre>

<p><a href="http://jsfiddle.net/pP285/9/" rel="nofollow">Live DEMO</a></p>


blocks|key|1409379|text|您可以切换两个div的顺序：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1409380|++<div+style='float:right'>
++++<input+type='submit'+value='asdf'+/>
++</div>
++<div>asdfaskjdfakjsd</div>|code-block|syntax|javascript|1409381|只要你不介意它们的顺序颠倒。|1409382|下面是一个演示此效果的fiddle。第四个示例显示了颠倒的div。|offset|length|1409383|entityMap|0|LINK|mutability|MUTABLE|url|http://jsfiddle.net/tracyfu/zYzqr/^0|0|0|0|B|6|0|0^^$0|@$1|2|3|4|5|6|7|U|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|V|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|W|8|@]|9|@]|A|$]]|$1|I|3|J|5|6|7|X|8|@]|9|@$K|Y|L|Z|1|10]]|A|$]]|$1|M|3|-4|5|6|7|11|8|@]|9|@]|A|$]]]|N|$O|$5|P|Q|R|A|$S|T]]]]

<p>You can switch the order of the two divs:</p>

<pre><code>  &lt;div style='float:right'&gt;
    &lt;input type='submit' value='asdf' /&gt;
  &lt;/div&gt;
  &lt;div&gt;asdfaskjdfakjsd&lt;/div&gt;
</code></pre>

<p>As long as you don't mind them being in reverse order.</p>

<p>Here's a <a href="http://jsfiddle.net/tracyfu/zYzqr/" rel="nofollow">fiddle</a> to demonstrate this effect. The fourth example shows the divs reversed.</p>


blocks|key|1409410|text|我为我跳来跳去道歉。我注意到，即使使用颠倒的div，文本也不会完全居中。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1409411|这是另一个解决方案(第五个例子)：http://jsfiddle.net/tracyfu/zYzqr/|offset|length|1409412|#method5+{
++position:+relative;
}

#method5+.submit+{
++position:+absolute;
++right:+0;
++top:+0;
}|code-block|syntax|javascript|1409413|唯一的问题是，如果你不小心，或者你的文本是动态的，它可能会与绝对定位的提交冲突。|1409414|entityMap|0|LINK|mutability|MUTABLE|url|http://jsfiddle.net/tracyfu/zYzqr/^0|0|H|Y|0|0|0|0^^$0|@$1|2|3|4|5|6|7|U|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|V|8|@]|9|@$D|W|E|X|1|Y]]|A|$]]|$1|F|3|G|5|H|7|Z|8|@]|9|@]|A|$I|J]]|$1|K|3|L|5|6|7|10|8|@]|9|@]|A|$]]|$1|M|3|-4|5|6|7|11|8|@]|9|@]|A|$]]]|N|$O|$5|P|Q|R|A|$S|T]]]]

<p>I apologize for jumping around. I noticed that even with the reversed divs, the text didn't appear completely centered.</p>

<p>Here is yet another solution (5th example): <a href="http://jsfiddle.net/tracyfu/zYzqr/" rel="nofollow">http://jsfiddle.net/tracyfu/zYzqr/</a></p>

<pre><code>#method5 {
  position: relative;
}

#method5 .submit {
  position: absolute;
  right: 0;
  top: 0;
}
</code></pre>

<p>The only problem with this is that if you're not careful, or your text is dynamic, it could collide with the absolutely positioned submit.</p>


blocks|key|1757481|text|标准的方法是使用"clearfix“hack。CSS：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1757482|/*+For+modern+browsers+*/
.cf:before,
.cf:after+{
++++content:"";
++++display:table;
}

.cf:after+{
++++clear:both;
}

/*+For+IE+6/7+(trigger+hasLayout)+*/
.cf+{
++++*zoom:1;
}|code-block|syntax|javascript|1757483|瑞士信贷Nicolas+Gallagher。然后将您的代码行包装在一个cf元素中：|offset|length|style|CODE|1757484|<div+class="cf">
++++<span>Button+text</span>
++++<div+style='float:right'>
++++++++<input+type='submit'+value='asdf'+/>
++++</div>
</div>|1757485|按钮文本被更改为span，或者您可以将其保留为div并将其向左浮动。cf用于将块属性提供给一组不自然表现这些属性的元素。如果没有它，后续内容将不会被清除。|1757486|1757487|unordered-list-item|1757488|1757489|entityMap|0|LINK|mutability|MUTABLE|url|http://nicolasgallagher.com/micro-clearfix-hack/^0|0|0|Z|2|4|H|0|0|0|8|4|N|3|Y|2|0|0|0|0^^$0|@$1|2|3|4|5|6|7|12|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|13|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|14|8|@$I|15|J|16|K|L]]|9|@$I|17|J|18|1|19]]|A|$]]|$1|M|3|N|5|D|7|1A|8|@]|9|@]|A|$E|F]]|$1|O|3|P|5|6|7|1B|8|@$I|1C|J|1D|K|L]|$I|1E|J|1F|K|L]|$I|1G|J|1H|K|L]]|9|@]|A|$]]|$1|Q|3|-4|5|6|7|1I|8|@]|9|@]|A|$]]|$1|R|3|-4|5|S|7|1J|8|@]|9|@]|A|$]]|$1|T|3|-4|5|6|7|1K|8|@]|9|@]|A|$]]|$1|U|3|-4|5|6|7|1L|8|@]|9|@]|A|$]]]|V|$W|$5|X|Y|Z|A|$10|11]]]]

<p>The standard approach is to use the "clearfix" hack. CSS:</p>

<pre><code>/* For modern browsers */
.cf:before,
.cf:after {
    content:"";
    display:table;
}

.cf:after {
    clear:both;
}

/* For IE 6/7 (trigger hasLayout) */
.cf {
    *zoom:1;
}
</code></pre>

<p>Credit <a href="http://nicolasgallagher.com/micro-clearfix-hack/" rel="nofollow">Nicolas Gallagher</a>. Then wrap your line in a <code>cf</code> element:</p>

<pre><code>&lt;div class="cf"&gt;
    &lt;span&gt;Button text&lt;/span&gt;
    &lt;div style='float:right'&gt;
        &lt;input type='submit' value='asdf' /&gt;
    &lt;/div&gt;
&lt;/div&gt;
</code></pre>

<p>Button text is changed to a <code>span</code>, or you could leave it as a <code>div</code> and float it left. <code>cf</code> is used to give block properties to a set of elements that do not naturally exhibit them. Without it, ensuing content will not be cleared.</p>

<ul>
<li><a href="http://jsfiddle.net/paislee/SZbhy/" rel="nofollow"><strong>DEMO</strong></a></li>
</ul>


<p>Given this simplified snippet :</p>

<pre><code>&lt;html&gt;
  &lt;body&gt;
    &lt;div&gt;
      &lt;div style='text-align:center;'&gt;asdfaskjdfakjsd&lt;/div&gt;
      &lt;div style='float:right'&gt;
        &lt;input type='submit' value='asdf' /&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/body&gt;
&lt;/html&gt;
</code></pre>

<p>The button floats to the right, but below the text(On the next line). I know I can realign it using relative positioning, but is there a correct way of having both on the same line.</p>

<p>Even better if adding the button on the right would not effect the centre align of the text. ie it does not get pushed to the left.</p>


button float drops below parent div

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

给定这个简化的代码片段：<html>  <body>    <div>      <div style='text-align:center;'>asdfaskjdfakjsd</div>      <div style='float:right'>        <input type='submit' value=...

问按钮浮动放置在父div下方
EN

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问按钮浮动放置在父div下方EN