当前位置：文江博客话题详情

`min-width` 不适用于表单 `input[type="button"]` 元素吗？

发布于 2024-10-03 20:26:58 字数 344 浏览 5 评论 0 原文

有人看到这不起作用的原因吗？（适用于width，但不适用于min-width）

input[type="button"] {
    min-width: 100px;
}

编辑：澄清

“按钮”选择器适用于width， min-width 只是不能
min-width 与其他元素一起使用，只是不能 “按钮”选择器
这是打开的铬/野生动物园。不是IE的问题。

原文

Anyone see a reason why this isn't working? (works with width, just not min-width)

input[type="button"] {
    min-width: 100px;
}

EDIT: clarification

"button" selector works with width,
just not min-width
min-width works with other elements, just not
"button" selector
This is on
chrome/safari. Not an IE issue.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

写给空气的情书 2024-10-10 20:26:59

在调查这个答案时，我发现更改按钮的border-color属性也可以启用Chrome 中的 min-width CSS 属性。（它还会禁用多个内置属性，例如默认按钮背景颜色，因此请谨慎使用。）

回复收藏 0 原文

喜你已久 2024-10-10 20:26:59

min-width 应该可以完美工作，你只是看不到效果，可能是因为你使 min-width 小于 width.. 无论如何，优秀的 html 代码示例：

<input type="button" style="width:50px;height:5em;min-width:40px;"

min-width should work perfectly, you just can't see effects maybe because you make min-width less than width.. anyway example for fine html code:

<input type="button" style="width:50px;height:5em;min-width:40px;"

回复收藏 0 原文

灯角 2024-10-10 20:26:59

是的...只要你这样设计它就可以工作：

input[type="submit"], button, .button, a.actionlink {
    cursor: pointer;
    display: inline-block;
    font-family: "Arial","Verdana","Helvetica","sans-serif";
    font-size: 12px;
    font-weight: bold;
    min-width: 85px;
    -moz-outline: 0 none;
    outline: 0 none;
    padding-bottom: 7px;
    padding-top: 7px;
    text-align: center;
}

Yes... it does work provided you style it this way:

input[type="submit"], button, .button, a.actionlink {
    cursor: pointer;
    display: inline-block;
    font-family: "Arial","Verdana","Helvetica","sans-serif";
    font-size: 12px;
    font-weight: bold;
    min-width: 85px;
    -moz-outline: 0 none;
    outline: 0 none;
    padding-bottom: 7px;
    padding-top: 7px;
    text-align: center;
}

回复收藏 0 原文

天生の放荡 2024-10-10 20:26:59

我刚刚遇到了这样的问题并找到了解决方法。
但使用按钮标签，而不是输入。

input[type="button"] {
    min-width:100px;
}

--[更改为]-->

button {
    width:auto;
    min-width:100px;
}

I just encountered like this issue and find the way to fix.
But using button tag, not input.

input[type="button"] {
    min-width:100px;
}

--[change to]-->

button {
    width:auto;
    min-width:100px;
}

回复收藏 0 原文

你如我软肋 2024-10-10 20:26:59

我在这里找到了一个简单的答案：

.button-class {
    box-sizing: unset;
    width: 100%;
    /* additional style properties */
}

这会将宽度设置为父级的 100%。基本上，您只需取消设置 box-sizing 属性即可阻止您设置width 属性。此解决方案适用于和

I found a simple answer here:

.button-class {
    box-sizing: unset;
    width: 100%;
    /* additional style properties */
}

This will set the width to be 100% of the parent. Basically you just need to unset the box-sizing property that prevents you from setting the width property. This solution works with <input type="button"> <input type="submit"> and <button> HTML tags.

回复收藏 0 原文

青丝拂面 2024-10-10 20:26:59

min-width 在旧版本的 Internet Explorer 中不受支持和/或存在错误。

您可以在此处查看兼容性表。

这是在 form 元素上使用 min-width 的示例，为其设置 width 属性总是明智的。

<html>
<head>
<title>TAG index</title>

<style type="text/css">

.example {
  width: 100%;
  max-width: 600px;
  min-width: 500px;
}

textarea {
  height: 10em;
}

</style>

</head>

<body>

<p>minimum width:500px - maximum width:600px</p>

<form method="POST" action="example.cgi">

  <p><input type="text" name="item1" class="example"></p>

  <p><select name="item2" class="example">
    <option value="select1">Select1</option>
    <option value="select2">Select2</option>
    <option value="select3">Select3</option>
  </select></p>

  <p><textarea name="item3" cols="50" rows="10" class="example"></textarea></p>

</form>

</body>
</html>

min-width isn't supported and/or is buggy in older versions Internet Explorer.

You can see a compatibility table here.

Here is an example of min-width being used on a form element, it is always wise to set a width property to it too.

<html>
<head>
<title>TAG index</title>

<style type="text/css">

.example {
  width: 100%;
  max-width: 600px;
  min-width: 500px;
}

textarea {
  height: 10em;
}

</style>

</head>

<body>

<p>minimum width:500px - maximum width:600px</p>

<form method="POST" action="example.cgi">

  <p><input type="text" name="item1" class="example"></p>

  <p><select name="item2" class="example">
    <option value="select1">Select1</option>
    <option value="select2">Select2</option>
    <option value="select3">Select3</option>
  </select></p>

  <p><textarea name="item3" cols="50" rows="10" class="example"></textarea></p>

</form>

</body>
</html>

回复收藏 0 原文