发表新帖
发表新帖

How to right-align form input boxes?

前端 未结
关注
8 649
野的像风
野的像风 2021-01-01 08:53

I have a seemingly easy problem to solve, but am struggling. How do I get these two inputs to align to the right of the form, without using the BR element ?
相关标签:
8条回答
  • 感情败类
    2021-01-01 08:53

    Try use this:

    <html>
<body>
   <input type="text" style="direction: rtl;" value="1">
   <input type="text" style="direction: rtl;" value="10">
   <input type="text" style="direction: rtl;" value="100">
</body>
</html>
    0 讨论(0)
  • 猫巷女王i
    2021-01-01 08:56

    You can use floating to the right and clear them.

    form {
  overflow: hidden;
}
input {
  float: right;
  clear: both;
}
    <form>
  <input name="declared_first" value="above" />
  <input name="declared_second" value="below" />
</form>

    You can also set a right-to-left direction to the parent and restore the default left-to-right on the inputs. With display: block you can force them to be on different lines.

    form {
  direction: rtl;
}
input {
  display: block;
  direction: ltr;
}
    <form>
  <input name="declared_first" value="above" />
  <input name="declared_second" value="below" />
</form>

    Or the modern way, flexbox layout

    form {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}
    <form>
  <input name="declared_first" value="above" />
  <input name="declared_second" value="below" />
</form>

    0 讨论(0)
  • 刺人心
    2021-01-01 09:00

    Try use this:

    input {
  clear: both;
  float: right;
  margin-bottom: 10px;
  width: 100px;
}
    0 讨论(0)
  • 粉色の甜心
    2021-01-01 09:07

    Try this:

    <!DOCTYPE html>
<html>
<head>
    <style type="text/css">
    p {
        text-align: right;
    }
    input {
        width: 100px;
    }
    </style>
</head>

<body>
    <form>
        <p>
            <input name="declared_first" value="above" />
        </p>
        <p>
            <input name="declared_second" value="below" />
        </p>
    </form>
</body>
</html>
    0 讨论(0)
  • 忘了有多久
    2021-01-01 09:08 
    input { float: right; clear: both; }
    0 讨论(0)
  • 生来不讨喜
    2021-01-01 09:08

    To affect ONLY text type input boxes use the attribute selector

    input[type="text"]

    This way it will not affect other inputs and just text inputs.

    https://www.w3schools.com/css/css_attribute_selectors.asp

    example, use a div and give it an idea to refer to:

    #divEntry input[type="text"] {
text-align: right;}
    0 讨论(0)
 看不清?
提交回复
热议问题