向右浮动而不创建新线

Question

HTML：

<div>Due date:<input type="text" name="dueDate" size="30" value="{{ticket.fields.interval.lastExecution|e}}" required  disabled="disabled"></input></div>
<div>Created by:<input type="text" name="createdBy" size="30" value="{{ticket.fields.personCreated|e}}" required  disabled="disabled"></input></div>

CSS：

.open-tickets-view input {
    border:         0px solid #474a52;
    border-radius:  0px;
    max-width:      200px;

结果：

如果我尝试使用内联块显示向右浮动：

CSS：

.open-tickets-view input {
    border:         0px solid #474a52;
    border-radius:  0px;
    max-width:      200px;
    display:        inline-block;
    float:          right;

结果：

我在display: flex和use justify-content: space-between之间尝试了几种不同的组合，但文本总是打破一个新行。

Answer 1

使用输入元素使用<label>是件好事。因为它是输入的标签。带标签的默认浏览器行为是，如果单击标签，鼠标将聚焦输入。 Read more about it here

使用float：

＆＃13;

＆＃13;

div.myDiv {
   width: 300px;
   border: solid 2px red;
}
div.myDiv:after {
   /* clear floats is a good thing */
   content: '';
   display: block;
   clear: both;
}
div.myDiv input {
   float: right;
   border:solid 2px green;
}
div.myDiv label {
   border:solid 2px green;
}

＆＃13;

<div class="myDiv">
  <label for="uname">Choose a username: </label>
  <input type="text" id="uname" name="name">
</div>

＆＃13;

＆＃13;

＆＃13;

使用定位：

＆＃13;

＆＃13;

div.myDiv {
   position: relative;
   width: 300px;
   border: solid 2px red;
}
div.myDiv input {
   border:solid 2px green;
   position: absolute;
   right: 0;
}
div.myDiv label {
   border:solid 2px green;
}

＆＃13;

<div class="myDiv">
  <label for="uname">Choose a username: </label>
  <input type="text" id="uname" name="name">
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

您可以对margin-left:auto的子元素使用display:flex flex-direction:row，如下所示。

.container, .container > div {
  display: flex;
  flex-direction: row;
  white-space:nowrap;
}

.container .right {
  margin-left: auto;
}

<div class='container'>
  <div>
    <span>Due date:</span>
    <input type="text" name="dueDate" size="30" value="{{ticket.fields.interval.lastExecution|e}}" required disabled="disabled" />
  </div>
  <div class='right'>
    <span>Created by:</span><input type="text" name="createdBy" size="30" value="{{ticket.fields.personCreated|e}}" required disabled="disabled" />
  </div>
</div>

或者也许：

.container,
.container>div {
  display: flex;
}

.container {
  flex-direction: column;
}

.container>div {
  flex-direction: row;
  padding:1em;
}

.container .right {
  margin-left: auto;
}

<div class='container'>
  <div>
    <span>Due date:</span>
    <input class='right' type="text" name="dueDate" size="30" value="{{ticket.fields.interval.lastExecution|e}}" required disabled="disabled" />
  </div>
  <div>
    <span>Created by:</span><input class='right' type="text" name="createdBy" size="30" value="{{ticket.fields.personCreated|e}}" required disabled="disabled" />
  </div>
</div>