当前位置: 首页 > 知识库问答 >
问题:

内联输入并设置其宽度以适应CSS或jQuery中的内容

宗弘扬
2023-03-14

我希望它适合内容的基础上的屏幕宽度,在大型显示器的输入不会扩大宽度。我尝试了一些css技巧,但无法使其工作。

我设置

input {
  min-width: 100%;
  max-width: 100%;
}

和包含输入div

.rule-value-container {
  width: 100%;
  display: inline-block;
}

现在,input适合内容,但它在单独的行中。我尝试了display:inline-block!importance;以及parents div,但没有成功。

有什么建议吗?我的代码中缺少什么?谢谢.

null

$(document).ready(function() { 


$('#queryBuilder').queryBuilder({
    
    filters: [ 
     { id: 'name',
      label: 'Name',
      type: 'string',
      operators: ['equal','contains'] }
    ]
 });   
 
 
});
.rule-value-container {
  width: 100%;
  display: inline-block;
}

input {
  min-width: 100%;
  max-width: 100%;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<link rel='stylesheet' href="https://cdn.jsdelivr.net/npm/jQuery-QueryBuilder@2.5.2/dist/css/query-builder.default.min.css">


<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/jQuery-QueryBuilder@2.5.2/dist/js/query-builder.standalone.min.js"></script>
<script src="https://querybuilder.js.org/node_modules/sql-parser-mistic/browser/sql-parser.min.js"></script>


<div id="queryBuilder"></div>

null

共有1个答案

孙修德
2023-03-14

最简单的技巧是使用css calc()方法为标准分辨率应用宽度。接下来,使用媒体查询来调整您想要支持的分辨率的宽度%。

.rule-value-container {
  width: calc(100% - 42%); /*Can use either % value or px */
  display: inline-block;
}

@media screen and (min-width: 1400px) {
   .rule-value-container {
    width: calc(100% - <new % value>);
  }
}

null

$(document).ready(function() { 


$('#queryBuilder').queryBuilder({
    
    filters: [ 
     { id: 'name',
      label: 'Name',
      type: 'string',
      operators: ['equal','contains'] }
    ]
 });   
 
 
});
.rule-value-container {
  width: calc(100% - 60%);
  display: inline-block;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<link rel='stylesheet' href="https://cdn.jsdelivr.net/npm/jQuery-QueryBuilder@2.5.2/dist/css/query-builder.default.min.css">


<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/jQuery-QueryBuilder@2.5.2/dist/js/query-builder.standalone.min.js"></script>
<script src="https://querybuilder.js.org/node_modules/sql-parser-mistic/browser/sql-parser.min.js"></script>


<div id="queryBuilder"></div>
 类似资料:
  • 问题内容: 您可以设置诸如,和的内联元素的宽度,但是在放置它们之前不会发现任何效果。 a)我认为不能设置内联元素的内联宽度? b)假设可以设置宽度-在放置内联元素之前,我们不会注意到任何效果(因此我们指定了宽度)。位置如何/在哪里? c)为什么仅当我们“定位”内联元素时才显示它们的宽度? 问题答案: 正如其他人提到的那样,设置内联元素的宽度(或其他一些与位置相关的属性)将导致浏览器将元素显示为块元

  • 问题内容: 我需要一个解决方案 自动调节 的和一个勉强适合其内容。关键是加载后可以更改宽度和高度。我想我需要一个事件操作来处理iframe中包含的主体尺寸的变化。 问题答案:

  • 问题内容: html CSS 我想在我将display:inline属性添加到css中后,立即以其原始高度和宽度(在css中设置)并排显示两个div,它似乎失去了先前定义的高度和宽度。[用#1和#2检查divs似乎松动了高度和宽度设置] 有人可以指出我似乎正在做的错误或此怪异行为的解决方法吗? 问题答案: 内联对象没有高度或宽度。为什么要先将它们设置为内联?您可能想要浮动它们或使用它们。

  • 将父flex容器宽度调整为子flex容器内容宽度时出现问题。 使用Bulma,我有以下HTML结构 但它最终应用于所有子flex容器,如您所见: http://codepen.io/anon/pen/mWqRxW 如何解决这个问题,并使父flex容器适合子flex容器的宽度(在本例中是输入的宽度)?

  • 问题内容: 假设我有一个这样的html代码段: 这不是我的确切代码,但重要的是在固定宽度容器的同一行上有一个标签和一个文本输入。如何设置输入的样式以填充容器的剩余宽度,而无需包装并且不知道标签的大小? 问题答案: 尽管每个人都讨厌表的布局,但是他们使用显式表标记或display:table-cell确实对此类事情有所帮助

  • Fixed 盒子数量不是固定的 Fixed 盒子宽度是固定的 Fill 盒子只有一个 Fill 盒子宽度是动态的 如何让 Fill 填满剩余 Container 的宽度? 如下图