Question

这是一个非常简单的问题，我无法找到解决方案。我创建了一个选择下拉列表。但是，它看起来像两个控件。像：

               -----------------
             |     ----------     |  ------------
                  |    Tax    |                  |
             |     ----------     |  ------------
                -----------------

但我的要求是，它应该是这样的：

                ---------- ----------
               |   Tax    |          |
                ---------- ----------

第一个是选择按钮，第二个是空文本框。

这是我尝试的方式：

<div class="row">
                    <div class="col-sm-6">
                        <div class="form-group">
                            <label class="col-sm-6">Tax Value</label>
                            <div class="col-sm-6">
                                <div class="input-group">
                                    <div class="input-group-btn">
                                        <select type="button" class="btn btn-default dropdown-toggle align-right" id="tax_toggle" name="tax_toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Tax <span class="caret"></span></select>
                                    </div>
                                    <input type="text" id="invoice_request_tax_value" name="invoice_request_tax_value" class="form-control" placeholder="Tax Value" required="required" readonly="readonly">
                                </div>
                            </div>
                        </div>
                    </div>

我不知道出了什么问题。有人可以帮我解决这个问题吗？

Answer 1

尝试类似下面给出的代码，创建自定义下拉菜单。（根据您的要求更改css属性）。

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="customSelect">
   <span class="toggler" id="timeToggler">
      <span id="time">----</span>
      <span style="margin-left:10px;display : inline-block;" class="caret"></span>
   </span>
   <div class="selectOption" style="display : none">
       <div class="selectOptionRow" style="display: block;">
          <span class="padding15">opt1</span>
       </div>
     <div class="selectOptionRow" style="display: block;">
          <span class="padding15">opt2</span>
       </div>
     <div class="selectOptionRow" style="display: block;">
          <span class="padding15">opt3</span>
       </div>
   </div>
</div>

＆＃13;

jvm 1 | 2016-05-17 14:05:57,862+0800 INFO [ar-7-thread-2] admin 
org.sonatype.nexus.proxy.maven.routing.internal.RemoteContentDiscovererImpl 
- Remote strategy prefix-file on M2Repository(id=central) detected invalid 
input, results discarded: Prefix file size exceeds maximum allowed size 
(100000), refusing to load it.

＆＃13;

.button{
width: 100%;
background-color: #CEC7C9;
color: #584F52;
margin: 0 auto;
}

＆＃13;

设计选择下拉列表

1 个答案: