对齐 JS 脚本和 HTML 表单

Question

我有一个 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> 但我是不确定是否有任何其他方法可以做到这一点。

Answer 1

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

将此添加到您的 HTML 即可。

Answer 2

您可以将脚本标签包装在 div 中，并使用 id 或 classname 并像这样设置样式：

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;
}

Answer 3

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

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

 <!DOCTYPE html> <html> <head> <TITLE> test </TITLE> <link rel="stylesheet" href="style.css"> <script src="script.js"></script> </head> <BODY> <div id="blockUsr"> <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> </body> </html>

对齐 JS 脚本和 HTML 表单

Alignment of JS Script and HTML form

html

javascript

forms

alignment