Question

我有一个ul列表，其中包含li标签内的普通文本。我尝试将其显示为内联并且有效。

但是，我尝试用表单替换该文本，然后无法再以内联方式显示。

这是我的HTML：

<ul class='test'>
   <li><form method='post' action=''>
       <input type='hidden'><br><br>
       <button class='hi' type='submit'>Test1</button>
       </form>
  </li>
  <li><form method='post' action=''>
     <input type='hidden'><br><br>
     <button class='hi' type='submit'>Test2</button>
     </form>
  </li>

这是css：

.hi{
  display:block;
  background-color:white;
  color:blue;
  border: none;
  outline:none;
}
.hi:hover{
   text-decoration:underline;
}
.test{
  list-style-type:none
}
.test li{
  display:inline;
}

这是我的JSfiddle

我应该怎样做该测试1和测试2的jsfiddle以内联方式显示？

Answer 1

默认情况下，在浏览器中，<form> css为display: block;

您必须在css文件中定义

form {
    display:inline;
}

Updated Fiddle

更好的方法是在<form>

中定义类

<form method="post" action="" class="myform">

并添加你的css

.myform {
    display:inline;
}

它将超过默认浏览器css，也不会影响您在网站上拥有或将拥有的其他表单。

Answer 2

几个问题：br创建了换行符。 form默认为display:block。您的button设置为display:block。

form, button.hi {
    display:inline;
}

br {
    display:none;
}

Answer 3

您只需添加标记

.test li {
  float:left;
  display:inline
}

无法在ul内显示内联形式

3 个答案: