代码之家 › 专栏 › 技术社区 › D T

如何设置sub div的宽度sroll div的全宽?

css html

0

D T · 技术社区 · 6 年前

这是我的密码:

<html >
<head>    
<style>
.searchframe {
    border: 1px solid #545454;
    min-height: 80vh;    
    overflow-y: scroll;
    width: 290px;   
   
}
.btnMenu {
    width: 100%;
    display: block;
    background: #2185D0;   
    white-space: nowrap;
   
} 
.groupItemSearch{
    padding-bottom:10px;
    width:100%;
}
.groupLeft {   
    white-space: nowrap;
}
</style>	
</head>
<body>
    <div class="searchframe">
	  <div class="groupItemSearch">
		  <a style="Color:#ffffff;"  class="btnMenu" >External Static pressure - inchAqua</a>
		  <div class="groupLeft">
		  <input type="text" style="display: inline;">
		  <label style="display: inline;">ï½</label>
		  <input style="display: inline;">
		  <label style="display: inline;"> inchAqua</label>
		  <button style="display: inline;">Search </button>
		  </div>
	  </div>
      <div class="groupItemSearch">
		  <a style="Color:#ffffff;"  class="btnMenu" >External Static pressure - inchAqua</a>
		  <div class="groupLeft">
		  <input type="text" style="display: inline;">
		  <label style="display: inline;">ï½</label>
		  <input style="display: inline;">
		  <label style="display: inline;"> inchAqua</label>
		  <button style="display: inline;">Search </button>
		  </div>
	  </div>
	</div>
</body>
</html>

如何设置sub div的宽度sroll div的全宽?

1 回复 | 直到 6 年前

1

1

Manjuboyz 6 年前

我已经为你解决了这个问题,让我知道。控件(文本框、按钮)使 width 290px 根据您的要求,您需要在同一宽度内。

.searchframe {
  height: 80vh;
  border: 2px solid yellow;
  white-space: nowrap;
  width: 290px;
  overflow: auto;
}

.btnMenu {
  color: #ffffff;
  background: #2185D0;
}

.groupItemSearch {
  padding-bottom: 10px;
  border: 1px solid red;
  display: inline-block;
}

<body>
  <div class="searchframe">
    <div class="groupItemSearch">
      <a class="btnMenu">External Static pressure - inchAqua</a>
      <div class="groupLeft">
        <input type="text">
        <label>ï½</label>
        <input>
        <label> inchAqua</label>
        <button>Search </button>
      </div>
    </div>
  </div>
</body>

.searchframe {
  height: 80vh;
  border: 2px solid yellow;
  white-space: nowrap;
  width: 290px;
  overflow: auto;
  display: flex;
  flex-direction: column;
}

.btnMenu {
  color: #ffffff;
  background: #2185D0;
}

.groupItemSearch {
  padding-bottom: 10px;
  display: inline-block;
}

<html>
<head>
</head>
<body>
  <div class="searchframe">
    <div class="groupItemSearch"> <a class="btnMenu">External Static pressure - inchAqua</a>
      <div class="groupLeft">
        <input type="text">
        <label>ï½</label>
        <input>
        <label> inchAqua</label>
        <button>Search </button>
      </div>
    </div>

    <div class="groupItemSearch"> <a class="btnMenu">External Static pressure - inchAqua</a>

      <div class="groupLeft">
        <input type="text">
        <label>ï½</label>
        <input>
        <label> inchAqua</label>
        <button>Search </button>
      </div>
    </div>


    <div class="groupItemSearch"> <a class="btnMenu">External Static pressure - inchAqua</a>

      <div class="groupLeft">
        <input type="text">
        <label>ï½</label>
        <input>
        <label> inchAqua</label>
        <button>Search </button>
      </div>
    </div>

  </div>

</body>

</html>

推荐文章

Jamie · 在CSS链接的文件名中添加Jinja占位符

1 年前

Mass · 如何在Tailwind CSS v4中创建配置

1 年前

magenta placenta · 将css变量合并为一个变量

1 年前

ptownbro · 重叠分区标签,同时保持以下所有分区和内容就位

1 年前

Luke Frost IEng MIMechE · Bootstrap 5.3在Div中的项目位置没有如我所期望的那样显示

1 年前

user29519291 · 为不同的变量创建一个带有可重用Click函数的简单菜单

1 年前

john Rizzo · 按钮背景颜色、悬停和活动状态存在问题

1 年前

Ben Halicki · 带有垂直和水平滚动条的表,使用HTML/CSS/Bootstrap-5固定行和列

1 年前

Luckkks · 过渡色工作不正常

1 年前

ModernEraCaveman · 如何对齐我的Bootstrap容器以适应网页的整个宽度?

1 年前

关于移动版

代码之家 - 一站式码农服务社区

沪ICP备11025650号