内联显示多个输入框

Question

我正在尝试在网页上内嵌这3个输入框。 “离开代码”和“发件人”使我能够内联。但是，“收件人”输入框保留在下一行。

我认为这与我给“ To”的标签有关。不确定如何解决此问题

我尝试使用一些基本的CSS。附件是我的代码被剪掉

<div class="Dates" *ngFor="let dateline of dates">
      <!--         
        <div class="ui-g">
          <div class="ui-g-12"> -->
      <div class="ui-g form-group">
        <div class="ui-g-12 ui-md-4">
          <p-dropdown [options]="leaveCodes2" [(ngModel)]="selectedLeaveCode2" placeholder="Leave Code"
            optionLabel="name"></p-dropdown>
          <div style = "display: inline-block; padding: 2rem ">
          <h3 >From</h3>
          <p-calendar [(ngModel)]="date3" [showIcon]="true" showTime="true" hourFormat="12"></p-calendar></div>
          <h3  style = "display: inline-block; padding: 2rem ">To</h3>
          <p-calendar [(ngModel)]="date3" [showIcon]="true" showTime="true" hourFormat="12"></p-calendar> <br><br>


        </div>
      </div>
    </div>

这是视图：

Answer 1

保持简单： 用于标签， 请勿将h3用作字幕： 如果使用div，h＃，p等，则所有这些元素均以块形式显示。

<div class="ui-md">
    <div class="ui-md-2">
       <label>First Item label:</label>
    </div>
    <div class="ui-md-2">
       First Value
    </div>
    ...
<div>

Answer 2

也许您可以在CSS的帮助下强制执行这种情况：

<div class="ui-md form_inline">
    <div class="ui-md-2">
       <label>First Item label:</label>
    </div>
    <div class="ui-md-2">
       First Value
    </div>
    ...
<div>

<style>
.form_inline > .ui-md-2{-ms-flex: 0 0 16.6666%!important;  flex: 0 0 16.6666%!important;  max-width: 16.6666%!important; float:left!important;}
</style>

您可以检查盒子的大小如何添加：

    <style>
.form_inline > .ui-md-2{border:1px solid red;}
</style>

如果div.ui-md-2的宽度为100％，则可能是css中的黑客对此进行了更改。最好使用特定的类来解决此问题，并且不要在整个项目中都更改此列。 ：D