Jquery UI模态框文本输入框右侧边距问题求助

嘿，我懂你的困扰——想去掉那个烦人的右边距，但又不想丢了text类带来的其他样式，对吧？问题大概率出在CSS选择器的优先级上，你之前写的margin:0可能被jQuery UI或Bootstrap里更具体的选择器给覆盖了。

给你几个可行的解决方案：

方案1：用更高优先级的自定义CSS选择器 #

不用删除text类，而是写一个更具体的选择器来精准覆盖右边距样式。结合模态框的类、父元素的类来提高权重，确保你的样式能生效：

/* 结合jQuery UI模态框默认的.ui-dialog类，再加上你的布局结构 */
.ui-dialog .row .col-lg-4 input.text {
  margin-right: 0;
}

如果你的模态框有自定义ID（比如#user-form-modal），可以写得更精准，避免影响页面其他地方的.text类：

#user-form-modal .text {
  margin-right: 0;
}

方案2：用JavaScript动态调整（CSS优先级实在搞不定时用） #

要是CSS优先级的问题还是没法解决，你可以在模态框初始化完成后，用jQuery动态修改样式：

// 监听模态框打开事件，触发后调整输入框边距
$(document).on('dialogopen', '.ui-dialog', function() {
  $(this).find('input.text').css('margin-right', '0');
});

为什么之前的尝试没成功？ #

你单独写的.text { margin:0; }权重太低，jQuery UI里的样式可能是类似.ui-widget input.text这类组合选择器，权重比你单独的类选择器高，所以你的样式被覆盖了。用更具体的选择器就能解决这个问题啦。

内容的提问来源于stack exchange，提问作者rafalbballer