Text-align不适用于表单元素

Question

为什么text-align不适用于表单？ 我希望我的表单与右边对齐。 请帮我。 我可以不用花车吗？

<header>
  <nav>
    <ul>
      <li><a href="">One</a></li>
      <li><a href="">Two</a></li>
      <li><a href="">Three</a></li>
      <li><a href="">Four</a></li>
    </ul>
    <form action="">
      <input type="text">
      <button>Submit</button>
    </form>
  </nav>
</header>

我的css：

ul{
  display: inline;
  text-align: left;
}

ul li{
  display: inline;
  margin-right: 20px;
}

header form{
  display: inline;
  text-align: right;
}

Jsfiddle： https ：//jsfiddle.net/dsotpsq4/

Answer 1

在<nav>上使用弹性框并添加justify-content:space-between;

将此代码添加到您的css：

nav{
  display:flex;
  justify-content:space-between;
  align-items:center;
}

请参阅代码段：

 ul{ display: inline; text-align: left; } ul li{ display: inline; margin-right: 20px; } header form{ display: inline; text-align: right; } nav{ display:flex; justify-content:space-between; align-items:center; } 

 <header> <nav> <ul> <li><a href="">One</a></li> <li><a href="">Two</a></li> <li><a href="">Three</a></li> <li><a href="">Four</a></li> </ul> <form action=""> <input type="text"> <button>Submit</button> </form> </nav> </header> 

Answer 2

如果您希望整个表单位于标题的右侧，请更正此方法

header form{
  display: inline-block;
  float: right;
}

因为表单是一个块，您需要将其作为块移动到右侧

---

如果您希望表单内容在其右侧对齐，请更改并添加此内容

header form{
  text-align: right;
}
header form *{
  display: inline-block;
}

文本对齐仅适用于内联和内联块元素，因此您必须说输入和按钮是内联块。

Answer 3

请改用它。

ul{
  display: inline;
  text-align: left;
}

ul li{
  display: inline;
  margin-right: 20px;
}

header form{
  display: inline;
  float: right;
}

Answer 4

 header { padding: 0 20px; } ul { display: inline; padding: 0; } ul li { display: inline; margin: 0 10px; } header form { float: right; } 

 <header> <nav> <ul> <li><a href="">One</a></li> <li><a href="">Two</a></li> <li><a href="">Three</a></li> <li><a href="">Four</a></li> </ul> <form action=""> <input type="text"> <button>Submit</button> </form> </nav> </header> 

Answer 5

简单地将您的表单包裹在一个范围内，如下所示：

<div class="my-align">
  <span>
    <form>
      <input type="text">
    <form>
  </span>
</div>

然后在css

.my-align{text-align:right;}
.my-align form{text-align:left;}

顺便说一句，这只是因为你不想使用浮动。

Answer 6

你应该在css的form标签中添加position:absolute和right margin值...

form{
display: inline;
position: absolute;
right: 10px;
}

---

请注意，绝对定位的元素将从正常流中移除，并且可以与其他元素重叠...

---

W3Schools解释