时间戳

首页 > 解决方案 > 我如何在 div(div A) 中适合搜索文本字段和搜索按钮，其中 div (div A) 在另一个具有 100% 宽度的 div(div B) 中

html - 我如何在 div(div A) 中适合搜索文本字段和搜索按钮，其中 div (div A) 在另一个具有 100% 宽度的 div(div B) 中

问题描述

[我想这样做] [1]：https ://i.stack.imgur.com/OOSKk.png

我在 body 中创建了一个 div(div B)，它的宽度为 100%，它还有另一个 div (div A)，其中有两个组件。Div A 无法获得只有两个元素的宽度，它的宽度为 100% .

这是我的代码

 <div id="con"> <div id="srbt"> <input id="srch" type="text" placeholder="Paste Youtube link" name="search"> <button id="btn">Download</button></div> </div>

标签： htmlcss

解决方案

* {
  box-sizing: border-box;
}

#con {
  display:block;
  background: #502c6c;
  height:125px;
  width:100%;
  padding:30px;
}

#srbt {
  width:100%;
  background: #ffffff;
  height:65px;
  border-radius:5px;
  position:relative;
}

#srch {
    display:block;
    width:100%;
    border:none;
    height:65px;
    border-radius:5px;
    padding:0 20% 0 5%;
    line-height:65px;
    color:#6c7592;
    font-size:20px;
}

#btn {
  background:#ff5916;
  border:none;
  border-radius:5px;
  height:59px;
  width:20%;
  position:absolute;
  top:3px;
  right:3px;
  z-index:10;
  color:#ffffff;
  font-size:24px;
}
<div id="con"> 
  <div id="srbt"> 
    <input id="srch" type="text" placeholder="Paste Youtube link" name="search"> 
    <button id="btn">Start</button>
  </div> 
</div>

推荐阅读