样式文本输入和提交按钮为内联

Posted 2023-04-18

【中文标题】样式文本输入和提交按钮为内联

【英文标题】：style text input and submit button as inline

【发布时间】：2011-09-16 23:51:00

【问题描述】：

我想请教一下，如何设置我的文本输入和提交按钮的样式，这将是内联的，尤其是 - 我的模式看起来 this：

而现实this

在我的代码中：

<form accept-charset="UTF-8" action="/home/index" method="post">
  <div style="margin:0;padding:0;display:inline">
    <input name="utf8" type="hidden" value="&#x2713;" />
  </div> 
  <input class="search" data-autocomplete="/home/autocomplete_produkties_nazev" id="name" name="nazev" type="text" value="" /> 
  <input src="/images/search_btn.jpg?1308243954" type="image" /> 
</form> 

在 CSS 中：

input.search 
    padding: 6px;
    width: 500px;
    font-size: 15px;

    border: 2px solid #cfcfcf;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;

    background-image: url('/images/xxx.png');
    background-repeat: repeat-x;
    height: 61px;

我正在尝试获取以及如何修复，提交按钮始终高于文本输入按钮...我不知道，可能是哪里出了问题...可能有人给我一些提示或提示，如何在同一行放置文本输入和提交按钮？

谢谢

【问题讨论】：

将所有输入放在 div 中，然后给它一个宽度。你使用 float: left 作为输入

谢谢伊布，它有效！

在要求样式之前尝试验证！

我不确定我是否理解正确，但我相信您正在寻找的是 display: inline-block;它可以添加到两个元素中，并按照它们在 html 文件中的写入顺序将它们放在同一行。

【参考方案1】：

您可以尝试将搜索输入向左浮动，提交按钮向右浮动：http://jsfiddle.net/ianoxley/FEQhb/1/