JS Script 与 HTML 表单的对齐方式答案

【问题标题】：Alignment of JS Script and HTML formJS Script 与 HTML 表单的对齐方式
【发布时间】：2015-03-15 15:43:36
【问题描述】：

我有一个 JS <script> 函数，然后是一个 HTML<form> 脚本，我正在尝试将它们并排实现到我的网页中。但是，当我将它们实现到页面中时，它们会自动将自己置于另一个之上，就好像我的脚本中有一个 <br>。

<!DOCTYPE html>
<HTML>
<HEAD>
<TITLE>test</TITLE>
<BODY>
<script type="text/javascript" src="http://se-flair.appspot.com/4146548.js"></script><form action="http://www.qrz.com/lookup"  method="post" style="display:inline"><b>QRZ callsign lookup:</b> <input name="callsign" size="8" type="text" /> <input type="submit" value="Search" />&nbsp;</form>
</HTML>

我找到的所有信息都表明我需要从服务器下载 .js 并修改它的一些代码并删除其中可能包含的 <br> 但我不确定是否有其他方法。

【问题讨论】：

您能否将您的<script> 包装在一个 div 中并设置样式？
这是旧版本的天赋吗？我查看了我的帐户，它在 <a> 中给出了我的 <img>，而不是 <script>。
@kittycat3141 我在 StackApps 上使用 SE-Flair：stackapps.com/questions/2119/…
有什么理由需要使用脚本方法？
这就是我想知道的。使用 .png 不会添加新行。

标签： javascript html forms alignment

【解决方案1】：

如果你只是想删除
你可以像前面提到的那样使用 float 属性，我举个例子：

 /* Styles go here */ #blockUsr{ float:left; margin: 5px; }

 &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;TITLE&gt; test &lt;/TITLE&gt; &lt;link rel="stylesheet" href="style.css"&gt; &lt;script src="script.js"&gt;&lt;/script&gt; &lt;/head&gt; &lt;BODY&gt; &lt;div id="blockUsr"&gt; &lt;script type="text/javascript" src="http://se-flair.appspot.com/4146548.js"&gt; &lt;/script&gt; &lt;/div&gt; &lt;form action="http://www.qrz.com/lookup" method="post" style="display:inline"&gt; &lt;b&gt; QRZ callsign lookup: &lt;/b&gt; &lt;input name="callsign" size="8" type="text" /&gt; &lt;input type="submit" value="Search" /&gt; &amp;nbsp; &lt;/form&gt; &lt;/body&gt; &lt;/html&gt;

【讨论】：

【解决方案2】：

<style>
.se-flair {
    display: inline-block !important;
}
</style>

将其添加到您的 HTML 中，就完成了。

【讨论】：

我之前编辑了您的帖子并将您删除的内容重新添加到您的答案中的原因是，在您编辑之前我已经尝试过您在回答中所说的内容以及您的内容建议工作得很好。

【解决方案3】：

您可以将脚本标签包装在带有 id 或类名的 div 中，并像这样设置样式：

HTML：

<!DOCTYPE html>
<HTML>
<HEAD>
<TITLE>test</TITLE>
<BODY>
  <div id='left'>
    <script type="text/javascript" src="http://se-flair.appspot.com/4146548.js"></script>
  </div>
<form action="http://www.qrz.com/lookup"  method="post" style="display:inline"><b>QRZ callsign lookup:</b> <input name="callsign" size="8" type="text" /> <input type="submit" value="Search" />&nbsp;</form>
</HTML>

CSS

#left {
    float: left;
}

【讨论】：