Question

我无法将react-widgets（Dropdownlist和Multiselect）与我的样式集成，就像我之前使用的输入字段一样。

它应该是这样的：

白色矩形为反应小部件下拉列表分别为 Multiselect 。

这是一个codepen示例，第二个蓝色块包含react-widget的标记：http://codepen.io/peletiah/pen/ORLaGr

这是相关的（简化）标记：

.route {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
}

.sequence {
  display: flex;
  height: 90px;
  line-height: 90px;
}

.action {
  align-self: center;
  line-height: normal
}

<div class="route">
  <div class="sequence">
    <div class="action">
      <span>
            <input value="set">
          </span>
      <span>
            <input value="data goes here">
          </span>
    </div>
  </div>

  <div class="sequence">
    <div class="action">
      <div class="rw-dropdownlist rw-widget">
        <div class="rw-input">set</div>
      </div>
      <div class="rw-multiselect rw-widget">
        <div class="rw-multiselect-wrapper">
          <input>
        </div>
      </div>
    </div>
  </div>
</div>

第二个“序列”中 action -div中的标记是由react-widget生成的，所以我没有影响，不能轻易用 span替换它们第

小部件应该像第一个序列中的输入一样彼此相邻对齐，但是它们堆叠在一起。

是否可以使用css修复此问题？

在上面的codepen示例中，我已将react-widgets less-code包含在codepend的css-section的上半部分中，然后它的结尾是我的自定义css。

Answer 1

原始代码示例存在两个问题。通过设置＆＃34; line-height＆＃34;来实现＆＃34;＆＃34; -container在＆＃34;序列＆＃34; -container内的垂直对齐。行高还负责90px-high＆＃34; rw-multiselect-wrapper＆＃34; -div，它继承自＆＃34;序列＆＃34; -class。

Flexbox允许儿童使用＆＃34; align-self＆＃34; -property进行自我对齐。

添加＆＃34; align-self＆＃34;在课堂上并将每个react-widget-div包装在他们自己的＆＃34;动作＆＃34; -div中修复了对齐问题和高度问题。

＆＃13;

.route {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
}

.sequence {
  display: flex;
}

.action {
  align-self: center;
}

＆＃13;

<div class="route">
  <div class="sequence">
    <div class="action">
      <span>
            <input value="set">
          </span>
    </div>

    <div class="action">
      <span>
            <input value="data goes here">
          </span>
    </div>

  </div>

  <div class="sequence">
    <span class="sequence-order">2</span>

    <div class="action">
      <div class="rw-dropdownlist rw-widget">
        <div class="rw-input">bridge</div>
      </div>
    </div>

    <div class="action">
      <div class="rw-multiselect rw-widget">
        <div class="rw-multiselect-wrapper">
          test
          <input>
        </div>
      </div>
    </div>

  </div>
</div>

＆＃13;

Codepen-sample：http://codepen.io/peletiah/pen/ozjNpW

让react-widgets的元素在行方式的flexbox中对齐

1 个答案: