HTML - <form>标签添加换行符

Question

HTML - <form>标签添加换行符

4

好的，我有一个在右侧浮动的<li>如下：

enter image description here

这是它的样子：

<div id="right_menu">
<ul>
<li class="search-li"><input placeholder="Search things here..." type="text" class="search-tr" /></li>
</ul>
</div>

这里是CSS代码：

#right_menu {
    float:right;
    background: #575757;
}
#right_menu ul li a {
    border-left:1px solid #fff;
    border-right:0px !important;
}

search-li 类和 search-tr 没有样式。搜索菜单被包裹在#first_menu 中，对应的 CSS 样式如下：

#first_menu {
    background: #333 !important;
    width:100%;
    border-top:1px solid #fff;
}
#first_menu ul{
    margin: 0;
    padding: 0;
    background: #333;
    float: left;
    }

无论如何，当我在<li>中的<input>框周围添加<form action="search.php" method="get"> ... </form>时，我得到了这个：

enter image description here

我该如何修复这个问题？

谢谢

编辑：再想想，甚至不确定添加表单并按下回车键是否有效...

- test

1

你是否正在重置你的CSS？你能创建一个JSFiddle吗？ - anacarolinats

form 是否有任何 CSS 附加在它上面？ - Travis J

没有真实的例子很难回答。你能否制作一个jsfiddle或其他演示？你尝试过检查元素并找出这个空格来自哪里吗？ - antejan

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Diodeus - James MacFarlane · Accepted Answer

表单是块级元素，因此它们会添加一个换行符。重置表单的CSS以避免这种情况。

使用：

form {
   display:inline;
   margin:0;
   padding:0;
}

使用!important是表明不了解CSS特异性的标志。建议阅读相关内容。

另外，最好从CSS重置开始，这可以完全避免此表单布局问题。