如何使按钮宽度跟随基于文本的最大宽度按钮？

Posted 2023-03-14

【中文标题】如何使按钮宽度跟随基于文本的最大宽度按钮？

【英文标题】：How can I make button width to follow the most larger width button based on text?

【发布时间】：2020-05-29 19:25:39

【问题描述】：

如何使我的所有按钮都跟随基于文本的较大宽度的宽度？

按钮动态生成，文本将基于数据库中的数据。那么我希望它们在 UI 上具有相同的大小。

这可能吗？如果是。怎么样？

这是我的按钮：

@foreach($buttons as $button)
 <button class="btn col-lg-2 col-md-3 col-sm-4 text-center btn-button button$button->parent_id hide" type="button" onclick="buttonFunction('button$button->id'"  style="background-color: #69C1DA;">
  <input type="radio" class="hide" name="type" value="$button->id" id="button$button->id">
  <span>$button->name</span>
 </button>
@endforeach

这是我的按钮的用户界面

如您所见，文本不适合。我可以使按钮比现在更大，但我不知道什么时候一个词会出现在数据库中，它大到不再适合它。

提前致谢。

【问题讨论】：

你可以试试css属性white-space: normal;到你的按钮类吗？？

@ManirajMurugan 那有什么用？

它将使文本适合按钮的宽度..

@ManirajMurugan 它使我的特定按钮具有另一个对我不利的高度

那我建议不要把列号分开，给它col，codepen.io/Maniraj_Murugan/pen/OJVMjBb ..这将使一切都自动..

【参考方案1】：

如果是我 - 我会忘记尝试使用 boostrap 列并简单地使用 css 设置宽度。

这可以在纯 javascript 中完成（尤其是使用 document.querySelectorAll() 选择器 - 但由于您使用的是 jquery - 这是方法 -

遍历按钮并通过将每个按钮的宽度与最大宽度进行比较来找到最大宽度，如果它大于最大宽度 - 将该宽度设置为最大宽度。

然后将所有按钮设置为 maxWidth 并且瞧——所有按钮的宽度都与文本最长的按钮的宽度相同。

请注意，我仅为此 sn-p 删除了您的一些代码 - 并将样式移到 css 块中 - 使用外部 css 总是比每个按钮的内联更好。如果你想为不同的按钮设置不同的样式 - 应用具有不同样式的不同类。

let maxWidth = 0;

$('.btn').each(function()
 const width = parseFloat($(this).css('width'));
 if(width > maxWidth) maxWidth = width
)

$('.btn').css('width', maxWidth +'px');

.btn 
  background-color: #69C1DA;

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button class="btn text-center btn-button button$button->parent_id hide" type="button">

  <span>text</span>
 </button>
  <button class="btn text-center btn-button button$button->parent_id hide" type="button">
  <span>longer text</span>
 </button>
  <button class="btn text-center btn-button button$button->parent_id hide" type="button" onclick="buttonFunction('button$button->id'">
  <span> very very long text</span>
 </button>
   <button class="btn text-center btn-button button$button->parent_id hide" type="button">
  <span>short text</span>
 </button>

【讨论】：

这对我不起作用。我的按钮没有任何宽度。我将编辑我的答案并查看照片

我使用的是内联 CSS，因为那只是两个按钮。但我会考虑到这一点。在我尝试过的情况下，我也删除了我所有的 col bootstrap

哦，等等这行得通。我忘了添加我的默认按钮是隐藏的，所以我猜当我的网页加载时它会读取默认宽度为 0，因为它们是隐藏的。我只是在需要显示按钮时输入您的代码。非常感谢@gavgrif

不客气 - 乐于助人。祝你编码好运

【参考方案2】：

实际上有一种简单的方法可以使用 jQuery 以最少的代码来做到这一点。

您可以将此解决方案修改为get the largest button width and apply that width to all。

$(document).ready(function() 
  
  $.fn.widest = function() 
    return this.length ? this.width(Math.max.apply(Math, this.map(function()  
        return $(this).width();
    ))) : this;
	;
  
    $('.buttons').widest();
 );

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<button class="buttons" >One</button>
<button class="buttons" >Twooooo</button>
<button class="buttons" >Three Four Five Six Seven Eight</button>

ps：在网站上，他们提供了一个解决方案，其中涉及点击获取宽度，所以像我的代码一样修改它，你删除 click 函数 并在 中调用该代码准备功能。

这将确保您的按钮始终采用最大的按钮宽度值并将其应用于所有其他按钮。

【讨论】：

给按钮值添加更多内容，可以看到其他按钮会自动采用新的最大宽度:)

【参考方案3】：

答案已经在这里，但我添加了这个以获取有关使用 grid 和自定义属性的信息。

元素可以在几行上换行，但宽度相同，下面是演示。

var bigW = '0';
for (let e of document.querySelectorAll('.btn')) 
  elW = e.offsetWidth;
  if (elW > bigW) 
    bigW = elW;
  
  document.documentElement.style.setProperty("--myW", bigW + 'px');// update column's width //

div 
  display: grid;
  grid-template-columns: repeat(auto-fill, var(--myW)); /* custom properie here to size the columns */
  justify-content: center;/* center them for a better visual*/


button 
  white-space: nowrap;  /* we need this */

<div>
  <button class="btn">some more text </button>
  <button class="btn">text </button>
  <button class="btn">some bits of text </button>
  <button class="btn">Lorem Ipsum</button>
  <button class="btn">some loooooonnnng text </button>
  <button class="btn">some some text </button>
  <button class="btn">some text </button>
  <button class="btn">some text </button>
  <button class="btn">some text </button>
  <button class="btn">some text </button>
  <button class="btn">some text </button>
  <button class="btn">some text </button>
  <button class="btn">some text </button>
  <button class="btn">some text </button>
  <button class="btn">some text </button>
  <button class="btn">some text </button>
</div>

这是一支笔可以用来叉子或玩https://codepen.io/gc-nomade/pen/GRJovXZ

免责声明：要求浏览器支持 CSS 网格布局 和 自定义属性/CSS 变量 (--*:value)

https://developer.mozilla.org/en-US/docs/Web/CSS/--*

以-- 为前缀的属性名称，如--example-name，表示包含可在其他声明中使用var() 函数的值的自定义属性。

---

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout

CSS 网格布局擅长将页面划分为主要区域，或根据大小、位置和层定义由 html 基元构建的控件各部分之间的关​​系。

支持信息可以在http://caniuse.com找到

【参考方案4】：

如我所见，您需要在所有按钮内容更新后设置宽度。所以，你可以用Javascript检查最大宽度，并根据它改变按钮的宽度属性。

let buttons = document.querySelectorAll('.btn');
let maxWidth = 0;

for (let i = 0; i < buttons.length; i++)

  // You need to check the maximum value of all
  if (maxWidth < buttons[i].offsetWidth) maxWidth = buttons[i].offsetWidth;


for (let i = 0; i < buttons.length; i++)

  // You set the width to the max plus the padding left and right
  buttons[i].style.width = maxWidth + 40 + 'px';


// This was the maximum width
document.querySelector('p').innerHTML = maxWidth + 40 + 'px';

.btn

  width: fit-content;
  padding: 8px 20px;
  font-size: 16px;
  border: 1px solid blueviolet;
  color: white;
  background-color: blueviolet;
  margin: 1vmin 2vmin;
  cursor: pointer;
  transition: 0.3s ease;

.btn:hover

  color: blueviolet;
  background-color: transparent;
 

<button class='btn'>
  This is a button
</button>
<button class='btn'>
  Ok, you shoud click this!
</button>
<button class='btn'>
  Click here!
</button>
<button class='btn'>
  Learn more
</button>
<button class='btn'>
  Come here, buddy!
</button>
<button class='btn'>
  What a button
</button>
<p>
</p>