职位问题

Question

如果查看“状态”下拉框和zipcode文本框，则会将邮政编码框高度重新定位为下拉框的高度。如何将zipcode文本框与城市框的高度保持一致？

已解决---

我能够使用flexbox和html表来解决这个问题。我最初使用的是flexbox，但没有意识到我可以使用align-items:flex-start来完成我想要做的事情。

使用flexbox代码：

                    <div class="flex" style="align-items:flex-start">
                            <div class="selector_container marTop10pt">
                                <div class="state_container flex padLeft15pt padTop15pt padBtm15pt"">
                                    <div class="state">State</div>
                                    <div class="right padRight15pt" style="width: 100%"><img style="height: 10pt" src="assets/front/img/down_arrow.png" /></div>
                                </div>
                                <div class="state_option_container off">
                                    <div class="nonselect_selection padBtm20pt">- K -</div>
                                    <div class="state_selection">Kentucky</div>
                                </div>
                            </div>
                        <td valign="top">
                            <input style="width: 100pt" type="textbox" class="txt marLeft5pt zipcode marTop10pt" placeholder="Zip" />
                    </div>

使用Html表版本：

                    <table>
                    <tr>
                        <td>
                            <div class="selector_container marTop10pt">
                                <div class="state_container flex padLeft15pt padTop15pt padBtm15pt"">
                                    <div class="state">State</div>
                                    <div class="right padRight15pt" style="width: 100%"><img style="height: 10pt" src="assets/front/img/down_arrow.png" /></div>
                                </div>
                                <div class="state_option_container off">
                                    <div class="nonselect_selection padBtm20pt">- K -</div>
                                    <div class="state_selection">Kentucky</div>
                                </div>
                            </div>
                        </td>
                        <td valign="top">
                            <input style="width: 100pt" type="textbox" class="txt marLeft5pt zipcode marTop10pt" placeholder="Zip" />
                        </td>
                    </tr>
                    </table>

jQuery的：

$('.country_region_container').click(function() {
    $('.country_region_option_container').toggleClass('off');
});
$('.state_container').click(function() {
    $('.state_option_container').toggleClass('off');
});
$('.state_selection').click(function() {
    $cloned = $(this).html();
    $('.state').replaceWith('<div class="state">'+$cloned+"</div>");
    $('.state_option_container').toggleClass('off');
});
$('.selection').click(function() {
    $cloned = $(this).html();
    $('.country_region').replaceWith('<div style="width:100%" class="country_region">'+$cloned+"</div>");
    $('.country_region_option_container').toggleClass('off');
});

输出：

Answer 1

将两者放在同一张表中并指定高度和宽度

Answer 2

简单形式脚本

#form {
  position: relative;
  margin: 0 auto;
  padding: 10px 15px;
  width: 260px;/*width of your form*/
  border: 1px solid #efefef;
}


input,select {
  display: block;
  margin-bottom: 6px;
  width: 100%;
  height: 21px;/*height of inputs*/
  box-sizing: border-box;
}

#state-zip {
  position: relative;
}

#cz-right {
  position: absolute;
  top: 0;
  right: 0;
  width: 60px;
}

#cz-left {
  margin-right: 66px;/*width of zip input + space between zip input and select input*/
}

<div id="form">
  <input type="text" placeholder="Street address"/>
  <input type="text" placeholder="City"/>
  <div id="state-zip">
    <div id="cz-left">
      <select>
        <option>State</option>
        <option>Option</option>
      </select>
    </div>
    <input id="cz-right" type="text" placeholder="ZIP"/>
  </div>
  <select>
    <option>Country/Region</option>
    <option>Option</option>
  </select>
  
  
</div>