在网页设计中，布局是一个非常重要的环节。很多时候，我们需要将不同的元素（如文本框和按钮）排列在同一行，以达到更好的视觉效果或用户体验。本文将详细介绍如何使用CSS实现这一目标，并提供一些实用的小技巧。

方法一：使用`display: inline-block`

`inline-block`是一种非常常见的布局方式，它可以让元素像内联元素一样排列在同一行，同时又能设置宽度和高度等属性。

```html

```

```css

.container {

font-size: 0; / 消除inline-block之间的默认间距 /

}

.input-field, .button {

font-size: initial; / 恢复字体大小 /

display: inline-block;

vertical-align: middle; / 垂直居中对齐 /

}

.input-field {

width: 200px;

padding: 5px;

}

.button {

padding: 5px 10px;

}

```

这种方法简单易用，适合大多数场景。通过设置`vertical-align: middle`，可以确保文本框和按钮在垂直方向上对齐。

方法二：使用Flexbox

Flexbox是现代CSS布局的强大工具，能够轻松实现复杂的布局需求。使用Flexbox可以更灵活地控制元素的位置和大小。

```html

```

```css

.flex-container {

display: flex;

align-items: center; / 垂直方向居中 /

}

.input-field {

flex-grow: 1; / 自动扩展 /

margin-right: 10px;

}

.button {

padding: 5px 10px;

}

```

Flexbox的优势在于其强大的对齐能力和灵活性。通过`align-items: center`，我们可以轻松实现文本框和按钮的垂直对齐。此外，`flex-grow`属性可以让文本框自动占据剩余的空间。

方法三：使用表格布局

虽然表格布局已经不再是主流，但在某些情况下，它仍然可以作为一种解决方案。

```html

```

```css

.table-layout {

width: 100%;

}

.input-field, .button {

width: 100%;

box-sizing: border-box;

}

```

表格布局的优点是结构清晰，但在实际应用中并不推荐使用，因为它可能会带来不必要的复杂性。

总结

以上三种方法都可以有效地将文本框和按钮放置在同一行。选择哪种方法取决于具体的项目需求和个人偏好。对于简单的布局，`inline-block`是一个不错的选择；如果需要更高的灵活性和对齐精度，Flexbox无疑是最佳方案。而表格布局则应尽量避免，除非有特殊需求。

希望这些方法能帮助你在项目中更好地实现布局需求！