如何对齐 3 个独立的下拉菜单，以便它们水平并排显示？

发布于 2024-10-14 01:58:39 字数 946 浏览 2 评论 0原文

这是我的网站的链接，HighCountryCampingEquipmentAndOutdoorSports.com 下拉菜单显示如下：

------狩猎装备-----
---划船/海上导航---
-----按尺寸搜索帐篷-- ---

但我希望它们像这样并排：

---划船/海上导航 --- -----狩猎设备 ----- -----按尺寸搜索帐篷 -----

这里是我正在使用的脚本的副本：

<FORM name="guideform">
<SELECT name="guidelinks" onChange="window.location=document.guideform.guidelinks.options[document.guideform.guidelinks.selectedIndex].value"> <OPTION SELECTED value="jdrop2.htm">--Choose--
<OPTION value="jex15.htm">Page 1
<OPTION value="jex16.htm">My Cool Page
</SELECT>
</FORM>

谁能告诉我，我需要添加到上面的脚本中的脚本代码是什么，告诉它将 3 个下拉菜单排成一行，并排放置，如下所示:
菜单 A 菜单 B 菜单 C

代替：
菜单 A
菜单 B
菜单 C

我还在学习，我不知道所有的编程术语”，所以有人能给我一个如何做到这一点的示例脚本吗？我已经在网上搜索了几周了，而且我自己似乎不知道如何做到这一点。

原文

Here is the link to my site, HighCountryCampingEquipmentAndOutdoorSports.com
The drop down menus are displayed like this:

------Hunting Equipment------
---Boating/Marine Navigation---
-----Search Tents by Size-----

But I want them side by side like this:

---Boating/Marine Navigation--- -----Hunting Equipment----- -----Search Tents by Size-----

Here is a copy of the script I'm using:

<FORM name="guideform">
<SELECT name="guidelinks" onChange="window.location=document.guideform.guidelinks.options[document.guideform.guidelinks.selectedIndex].value"> <OPTION SELECTED value="jdrop2.htm">--Choose--
<OPTION value="jex15.htm">Page 1
<OPTION value="jex16.htm">My Cool Page
</SELECT>
</FORM>

Can anyone tell me, What the script code is that I need to add to the above script, to tell it to position the 3 pull down menus in a row, side by side like this:
Menu A Menu B Menu C

Instead of:
Menu A
Menu B
Menu C

I'm still learning and I don't know all the programming lingo", so could someone please give me an example script of how to do this? I've searched all over the net for a couple weeks now, and I can't seem to find out how to do this myself.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

醉南桥 2024-10-21 01:58:39

这三个下拉列表之所以位于彼此之下，是因为它们周围的“表单”元素以“块”样式呈现。您希望这三个“form”元素为“inline”或“inline-block”。最好的解决方案可能是使用“display: inline-block”样式向这些元素添加一个 css 类。

顺便说一句...看看您渲染的源代码（“查看源代码”）。通过验证器运行它。这是一个链接：

您可能想要修复这些错误。相当多的非标准 html/合规性问题可能会导致渲染问题。

希望这有帮助。

鲍勃

回复收藏 0 原文

猛虎独行 2024-10-21 01:58:39

对于 HTML 下拉列表，将其括在 p 标记中。这是一个例子：

<form>
Select your favorite browser:
<p>
<select id="myList" onchange="favBrowser()">
  <option></option>
  <option>Google Chrome</option>
  <option>Firefox</option>  
  <option>Internet Explorer</option>
  <option>Safari</option>
  <option>Opera</option>
</select>
<select id="myList" onchange="favBrowser()">
  <option></option>
  <option>Google Chrome</option>
  <option>Firefox</option>  
  <option>Internet Explorer</option>
  <option>Safari</option>
  <option>Opera</option>
</select>
</p>
</form>

For HTML dropdowns, enclosing it in p tag. here's an example:

<form>
Select your favorite browser:
<p>
<select id="myList" onchange="favBrowser()">
  <option></option>
  <option>Google Chrome</option>
  <option>Firefox</option>  
  <option>Internet Explorer</option>
  <option>Safari</option>
  <option>Opera</option>
</select>
<select id="myList" onchange="favBrowser()">
  <option></option>
  <option>Google Chrome</option>
  <option>Firefox</option>  
  <option>Internet Explorer</option>
  <option>Safari</option>
  <option>Opera</option>
</select>
</p>
</form>

回复收藏 0 原文

~没有更多了~