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;
}

因为form是一个块，你需要将它作为一个块移动到右边

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

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

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

您应该将position:absolute和右边距值添加到css ...

中的表单标记中

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

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

W3Schools Explanation

Text-align不适用于表单元素

6 个答案: