将 html 输入对齐在同一行

发布于 2024-12-22 03:35:00 字数 501 浏览 4 评论 0原文

有人可以给出一个简单的解决方案，如何将表单输入对齐在同一行上，例如，很多时候，当我构建表单时，我可以让它们彼此对齐，并且看起来不错，但是如果我将两个输入（如文本区域/文本）放在另一个文本或按钮旁边，我会得到垂直对齐差异。有没有办法解决这个问题而不需要摆弄边距和填充？

前任：

<style type='text/css'>
  form{
    display:inline;
  }
  textarea{
    font-size:25px;
    height:25px;
    width:200px;
  }
  input.button{
    height:25px;
    width:50px;
  }
</style>
<form>
  <textarea >Value</textarea><input type='button' class='button' value='Go'>
</form>

原文

Can somebody give a simple solution as to how to align form inputs on the same line,
for example, many times when I am building a form I can get them to align on top of each other and it looks sound, but if i put two inputs like a textarea/text next to another text or a button, I get vertical alignment differences. Is there a way to fix this without fiddling with the margins and padding?

ex:

<style type='text/css'>
  form{
    display:inline;
  }
  textarea{
    font-size:25px;
    height:25px;
    width:200px;
  }
  input.button{
    height:25px;
    width:50px;
  }
</style>
<form>
  <textarea >Value</textarea><input type='button' class='button' value='Go'>
</form>

分享到QQ

分享到微博

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

发布评论

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

苹果你个爱泡泡 2024-12-29 03:35:01

你有没有尝试过使用vertical-align css属性？

vertical-align:top;

这样一切都会看起来一致，并且您不必考虑利润。

Have you tried playing with the vertical-align css property?

vertical-align:top;

That way everything will look consistent and you won't have to play with margins.

回复收藏 0 原文

安穩 2024-12-29 03:35:01

textarea,input.button{display:inline-block;}

或者

textarea,input.button{float:left;}

根据您的垂直挑战方式进行选择

textarea,input.button{display:inline-block;}

textarea,input.button{float:left;}

take your pick depending on which way your vertically challenged

回复收藏 0 原文

羁绊已千年 2024-12-29 03:35:01

添加 vertical-align 似乎对我有用：

<style type='text/css'>
  form{display:inline;}
  textarea{width:200px;height:25px;font-size:25px;vertical-align:middle}
  input.button{width:50px;height:25px;vertical-align:middle}
</style>
<form><textarea >Value</textarea><input type='button' class='button' value='Go'></form>

Adding a vertical-align seems to work for me:

<style type='text/css'>
  form{display:inline;}
  textarea{width:200px;height:25px;font-size:25px;vertical-align:middle}
  input.button{width:50px;height:25px;vertical-align:middle}
</style>
<form><textarea >Value</textarea><input type='button' class='button' value='Go'></form>

回复收藏 0 原文

唠甜嗑 2024-12-29 03:35:01

您通常可以使用 display:inline-block; 或 float:left; 您希望项目在顶部或底部对齐吗？

在您的示例中，您尚未关闭输入类型，它应该是 type='button' - 您缺少一个 apos。

回复收藏 0 原文

情仇皆在手 2024-12-29 03:35:01

只需将 float:left 赋予文本区域

http://jsfiddle.net/2qdJc/2 /

回复收藏 0 原文

昵称有卵用 2024-12-29 03:35:01

<table>
  <tr>
    <td><input /></td>
    <td><input /></td>
  </tr>
</table>

当然，这让 CSS 纯粹主义者感到不安，但这确实很容易......

<table>
  <tr>
    <td><input /></td>
    <td><input /></td>
  </tr>
</table>

Sure, it makes the CSS purists squirm, but it's certainly easy...

回复收藏 0 原文

流殇 2024-12-29 03:35:01

你可以做这样的事情（在我的例子中有效）：

<div style="width:150px"><p>Start: <input  type="text" id="your_id"></p> 
  </div>

<div style="width:130px;margin-left: 160px;margin-top: -52px">
<a href="#" data-role="button" data-mini="true">Button</a>
</div>

这是一个演示： http://jsfiddle.net/ gn3qx6w6/1/

You can do something like this ( worked in my case ):

<div style="width:150px"><p>Start: <input  type="text" id="your_id"></p> 
  </div>

<div style="width:130px;margin-left: 160px;margin-top: -52px">
<a href="#" data-role="button" data-mini="true">Button</a>
</div>

Here is a demo: http://jsfiddle.net/gn3qx6w6/1/

回复收藏 0 原文

若言繁花未落 2024-12-29 03:35:01

对我来说，我使用了一个div并将所有输入放入div中并使用了vertical-align:top;对于div

<div style="vertical-align:top">
        <span id="FromDate">From Date</span><input id="FromDatetext" style="margin-left:10px" type="text" name="startdate" />
        <span id="ToDate"> To Date</span><input id="ToFatetext" type="text" name="enddate" />
        <input id="Submit1" type="submit" value="Search" class="btn btn-dark" />
    </div>

For me i used a div and put all inputs in div and used vertical-align:top; for div

<div style="vertical-align:top">
        <span id="FromDate">From Date</span><input id="FromDatetext" style="margin-left:10px" type="text" name="startdate" />
        <span id="ToDate"> To Date</span><input id="ToFatetext" type="text" name="enddate" />
        <input id="Submit1" type="submit" value="Search" class="btn btn-dark" />
    </div>

回复收藏 0 原文

~没有更多了~