html - 无法在输入框旁边居中文本

Question

我不确定我做错了什么，但我无法将文本放在搜索栏旁边。我尝试对输入框使用填充，但不是移动它，而是最终使框本身变宽或增加高度。我还尝试使用填充和边距移动搜索文本，但我仍然无法让文本按照我想要的方式移动。我也查看了 Stack 上发布的一些类似问题，但我仍然无法修复我的页面。我希望“搜索”文本和输入框彼此相邻，类似于您在表单上看到的方式。填充和边距不是用于移动文本和搜索栏的正确方法吗？这是我的代码和我的页面当前外观的图像。

HTML

<p id="textnexttosearchbar">Search</p>
<input type="text" id="searchbar">

CSS

/*Seach bar at top*/
#searchbar{
    margin-left: 200px;
}

/*Text next to search bar at top*/
#textnexttosearchbar{
    margin-left:20px;
}

标签： htmlcss

Answer 1

默认情况下，您的元素的显示属性block。更改为inline-block，您将万事俱备。

/*Seach bar at top*/
#searchbar{
    margin-left: 200px;
}

/*Text next to search bar at top*/
#textnexttosearchbar{
    margin-left:20px;
    display:inline-block;
}

<p id="textnexttosearchbar">Search</p>
<input type="text" id="searchbar">