Question

我正在研究alpha.dubaiexporters.com。

我几乎使用引导程序使网站具有响应能力。这就是我要设计的：

我想根据输入组调整输入组的边框。

调整大小时，它没有触及输入组。怎么实现呢？以下是我的代码：

.searcharea{
    background-image: url('https://d12dkjq56sjcos.cloudfront.net/pub/media/wysiwyg/Dubai-Skyline-Burj-Al-Arab-Big-Bus-Tours-01.17.jpg');
    background-repeat: no-repeat;
    background-size: 100% 100%;
    /*min-height: 300px;*/
    position:relative;
    width: 100vw;
    height: 100vh; 
    max-width:100%;
    
    }

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
   <div class="container-fullwidth">       
          <div class="searcharea col-sm-12"> 
             <div class="container">
                             <form class="form-inline">
            <div class="form-group">
    
    
                <div class="row">
                <div class="col-sm-2"></div>
                    <div class="col-sm-8">
                        <br /><br /><br /><br /><br /><br /> <br /><br /><br /><br /><br /><br /><br /><br />
                              <div class="input-group" style="padding-top:0px;padding-left:0px;" >
                                   <input id="txtkeyword" class="form-control" placeholder="Search By Keyword" style="display:inline; width:290px;height:60px;" type="text" runat="server" autocomplete="off"/>
                    <input id="txtserach" runat="server" type="text" class="form-control" list="browsers" name="myBrowser" autocomplete="off" placeholder="Search By Category" style="display:inline; width:290px;height:60px;"/>
                                  <datalist id="browsers">
      <option value="Automotive"/>
      <option value="Building and Interiors"/>
      <option value="Food, Kitchen and Hotel Supplies"/>
      <option value="Industrial and Machinery"/>
      <option value="Consumer and Household"/>
      <option value="Medical and Healthcare"/>
                         <option value="Printing , Packaging and Plastic"/>
                         <option value="IT / Telecom / Electronics"/>
                         <option value="Oil and Gas"/>
                         <option value="Power and Energy"/>
    </datalist>
                  
                               <button id="btnsearch" runat="server" type="submit" class="btn btn-danger" style="height:61px;" onserverclick="btnsearch_Click">
                            Search
                            </button>
       
                           
      </div>
                        </div>
                     <div class="col-sm-2"> </div>
    
                    </div>
                                 
                            </div></form></div>
    
                             </div></div>

Answer 1

我对所有输入和按钮都使用了outline属性，它确实起作用。

outline: 6px solid rgba(0,0,0,0.5);

立即检查，alpha.dubaiexporters.com

Answer 2

我尝试访问您的页面以使用代码，但这似乎并没有太大帮助。

您面临的问题是输入不包含定义的边距和填充参数。访问我的待办页面以了解这一点： MYTODO

在这里，我在“添加新的待办事项”输入区域上使用了名为box-sizing: border-box的属性。

如果在我的页面中将其禁用，则输入标签会放大并且不适合父框。

随身携带box-sizing属性，我认为您一定会很高兴。

如何根据输入组调整边框？

2 个答案: