本文介绍了如何在Chrome中将样式选择菜单设置为父容器宽度的100％?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正在创建一个带有文本框和样式选择菜单的表单(本质上是一个DIV，其中包含其他DIV).我希望两个项目都具有相同的宽度，最好不是固定的像素宽度，而是100％的可用空间.我有
I'm creating a form with a text box and a styled select menu (essentially a DIV with other DIVs within it). I would like both items to be the same width, preferably not a fixed pixel width, but rather 100% of the available space. I have
<div class="field">
<label for="user_notification_price">Label</label> <span class="required">*</span> <br>
<input size="30" type="text" name="user_notification[price]" id="user_notification_price" />
</div>
<div class="field">
<label for="user_notification_buy">Condition</label> <span class="required">*</span> <br>
<select name="user_notification[buy]" id="user_notification_buy"><option value="">Select Notification Time</option>
<option value="false">Above</option>
<option value="true">Below</option></select>
<p class='error'></p>
</div>
在其中我为文本框指定100％的宽度...
in which I specify 100% width for the text box ...
input[type=text] {
margin-bottom: 20px;
margin-top: 10px;
padding: 15px;
border-radius: 5px;
border: 1px solid #7ac9b7;
box-sizing: border-box;
width: 100%;
/* added property */
}
，然后为样式化的DIV菜单的宽度输入"100％"(通过jQuery完成).这在Firefox上效果很好- https://jsfiddle.net/yj3cdvfy/3/，但是在Chrome中，它看起来不太对齐.
and then "100%" for the width of the styled DIV menu (done through jQuery). This works great on Firefox -- https://jsfiddle.net/yj3cdvfy/3/ , but in Chrome its not looking so aligned.
请注意，样式选择菜单的文本会自动换行，并且文本框会超出父容器的边界.我以为Chrome应该是不错的浏览器！无论如何，我该怎么做才能使Chrome和Firefox中的功能相同?
Notice the text of the styled select menu is wrapping and the text box is exceeding the boundary of the parent container. I thought Chrome was supposed to be the good browser! Anyway, what do I need to do to get things working in Chrome the same way as in Firefox?
推荐答案
首先，当的> 取决于内容(此处就是这种情况).使用 pixels 可能是一个更好的主意.
First of all, setting margin in percentages is not a good idea when the width of the container depends on the content (which is the case here). Using pixels might be a better idea.
请记住:容器上的百分比margin是根据其width计算的:
Remember that percentage margin on a container is calculated based on its width:
为什么?
当margin在容器内的百分比 中给出百分比时，Chrome似乎有问题，而firefox没有此类问题.
Looks like Chrome has issues when margin is given in percentages inside an inline-block container, while firefox has no such issues.
可能的解决方案
请参阅下面的演示，其中将margin: 4% 15%替换为margin: 20px:
See demo below where margin: 4% 15% is replaced with margin: 20px:
$(function() {
$('select').each(function() {
styleSelectMenu($(this));
});
});
// This method applies the styles to our select menu
function styleSelectMenu(selectMenu) {
var $this = $(selectMenu),
numberOfOptions = $(selectMenu).children('option').length;
/*** NEW - start ***/
var $paddingCalculator = $('<div />', {
'class': "select-styled test"
}).css({
width: 0,
visibility: "hidden"
}).appendTo("body");
$this.addClass('select-hidden');
var paddingWidth = $paddingCalculator.outerWidth() + 10;
$paddingCalculator.remove();
var selectWidth = "100%"; // $this.outerWidth() + paddingWidth;
var clickHandled = false;
if (!$this.parent().hasClass('select')) {
var $wrapper = $("<div />", {
'class': "select",
'tabIndex': '1'
}).css({
width: selectWidth
}).focus(function() {
$(this).find('.select-styled').click();
}).blur(function() {
clickHandled = false;
$(this).find(".select-options li").removeClass("selected");
$(this).find('.select-styled').removeClass('active').next('ul.select-options').hide();
});
$this.wrap($wrapper);
} // if
/*** NEW - end ***/
if (!$this.next().hasClass('select-styled')) {
$this.after('<div class="select-styled"></div>');
} // if
var $styledSelect = $this.next('div.select-styled');
$styledSelect.text($this.children('option').eq(0).text());
if ($styledSelect.parent().find('ul').length > 0) {
$styledSelect.parent().find('ul').remove();
} // if
var $list = $('<ul />', {
'class': 'select-options'
}).insertAfter($styledSelect);
for (var i = 0; i < numberOfOptions; i++) {
$('<li />', {
text: $this.children('option').eq(i).text(),
rel: $this.children('option').eq(i).val()
}).appendTo($list);
}
var $listItems = $list.children('li');
// This is the event when someone opens the list
$styledSelect.unbind('click')
$styledSelect.click(function(e) {
//if(clickHandled) {
// clickHandled = false;
//} else {
clickHandled = true;
e.stopPropagation();
$('div.select-styled.active').each(function() {
$(this).removeClass('active').next('ul.select-options').hide();
});
$(this).toggleClass('active').next('ul.select-options').toggle();
var selectedIndex = $(this).parent().find('select option:selected').index();
selectedElement = $(this).parent().find(".select-options li")[selectedIndex];
$(selectedElement).addClass("selected");
selectedElement.scrollIntoView(false);
//} // if
});
// This is the event when someone actually selects something from the list
$listItems.unbind('click.selectStyledItem')
$listItems.bind('click.selectStyledItem', function(event) {
clickListItem(event, $styledSelect, $this, $(this), $list);
});
/* $(document).click(function(event) {
$styledSelect.removeClass('active');
$list.hide();
}); */
var selectedIndex = $this[0].selectedIndex;
if (selectedIndex > 0) {
var name = $this.attr("name")
var selectedText = $("select[name='" + name + "'] option:selected").text();
selectItemFromStyledList($styledSelect, $this, selectedText, $list);
} // if
var parent = $this.parent()
$(parent).bind('keydown', function(event) {
var currentElement = $(this).find(".select-options li.selected");
if (currentElement.length == 0) {
currentElement = $(this).find(".select-options li")[0];
$(currentElement).addClass("selected");
return;
} // if
var nextElement;
switch (event.keyCode) {
// case up
case 38:
nextElement = $(this).find(".select-options li")[($(this).find(".select-options li").index(currentElement) - 1) % $(this).find(".select-options li").length];
break;
// case down
case 40:
nextElement = $(this).find(".select-options li")[($(this).find(".select-options li").index(currentElement) + 1) % $(this).find(".select-options li").length];
break;
// case <ENTER>
case 13:
var currentElement = $(this).find(".select-options li.selected");
$(currentElement).click();
break;
// case escape
case 27:
$(this).blur();
}
$(this).find(".select-options li").removeClass("selected");
if (nextElement) {
$(nextElement).addClass("selected");
nextElement.scrollIntoView(false);
}
});
var keyUps = "",
timeOut, $selectOptions = $('.select-options');
$(parent).bind('keyup', function(event) {
if (!$selectOptions.prev().hasClass('active')) {
return false;
}
if (event.keyCode) {
keyUps += event.key;
retrieveFromOptions($selectOptions, keyUps);
}
clearTimeout(timeOut);
timeOut = setTimeout(function() {
keyUps = "";
}, 250);
//var currentElement = $(this).find(".select-options li.selected");
//var val = String.fromCharCode(event.keyCode);
//retrieveFromOptions($(this).find('ul'),val);
});
$listItems.hover(
function(e) {
$(this).addClass("selected");
},
function(e) {
$(this).closest(".select-options").find("li.selected").removeClass("selected");
}
);
}
// This is the method that will select an item from the styled list
function selectItemFromStyledList(styledSelect, selectMenu, selectedText, listToHide) {
$(styledSelect).text(selectedText).removeClass('active');
//var selectedVal = $(selectMenu).attr('rel');
//$(selectMenu).val(selectedVal);
$(listToHide).hide();
// Select option in the underlying list so that the form gets submitted
// with the right values
$(selectMenu).find("option[selected='selected']").removeAttr("selected");
$(selectMenu).find('option').filter(function() {
return $(this).html() == selectedText;
}).prop('selected', true)
// Trigger an on change event
$(selectMenu).trigger("change");
} // selectItemFromStyledList
// Called when someone clicks an item from the styled list
// The event data should contain the following parameters:
// styledSelect - the <div> element that contains the styled menu
// selectMenu - the actual form element that contains the items
// listItemClicked - the item that was clicked.
// list - THe <UL> element containig the <li> options
function clickListItem(event, styledSelect, selectMenu, listItemClicked, list) {
var $styledSelect = $(styledSelect);
var $selectMenu = $(selectMenu);
var $listItem = $(listItemClicked);
var $list = $(list);
event.stopPropagation();
var selectedText = $listItem.text();
selectItemFromStyledList($styledSelect, $selectMenu, selectedText, $list)
} // clickListItem
// Given a keystroke (val), this selects an option
function retrieveFromOptions($options, val) {
$options.find('li').each(function(index) {
if (this.textContent.substring(0, val.length).toLowerCase() === val.toLowerCase()) {
$(this).parent().find(".select-options li").removeClass("selected");
$(this).addClass("selected");
this.scrollIntoView(false);
//$options.scrollTop($(this).height()*index);
return false;
}
});
}body {
background-color: #e0e0e0;
}
form {
/*margin: 4% 15%;*/
margin: 20px;
font-family: Manuelle;
font-size: 14px;
}
/* line 20, /Users/nataliab/Documents/workspace/myproject/app/assets/stylesheets/form.css.scss */
header {
background-color: #4180C5;
text-align: center;
padding-top: 12px;
padding-bottom: 8px;
margin-top: -11px;
margin-bottom: -8px;
border-radius: 10px 10px 0 0;
color: aliceblue;
}
/* line 31, /Users/nataliab/Documents/workspace/myproject/app/assets/stylesheets/form.css.scss */
.field {
padding-top: 10px;
}
/* Makes responsive fields.Sets size and field alignment.*/
/* line 36, /Users/nataliab/Documents/workspace/myproject/app/assets/stylesheets/form.css.scss */
input[type=text] {
margin-bottom: 20px;
margin-top: 10px;
padding: 15px;
border-radius: 5px;
border: 1px solid #7ac9b7;
box-sizing: border-box;
/* added property */
}
/* line 45, /Users/nataliab/Documents/workspace/myproject/app/assets/stylesheets/form.css.scss */
.buttonContainer {
text-align: center;
}
/* line 49, /Users/nataliab/Documents/workspace/myproject/app/assets/stylesheets/form.css.scss */
input[type=submit] {
margin-bottom: 20px;
padding: 15px;
border-radius: 5px;
border: 1px solid #7ac9b7;
background-color: #4180C5;
color: aliceblue;
font-size: 15px;
cursor: pointer;
}
/* line 60, /Users/nataliab/Documents/workspace/myproject/app/assets/stylesheets/form.css.scss */
#submit:hover {
background-color: black;
}
/* line 64, /Users/nataliab/Documents/workspace/myproject/app/assets/stylesheets/form.css.scss */
textarea {
width: 100%;
padding: 15px;
margin-top: 10px;
border: 1px solid #7ac9b7;
border-radius: 5px;
margin-bottom: 20px;
resize: none;
}
/* line 73, /Users/nataliab/Documents/workspace/myproject/app/assets/stylesheets/form.css.scss */
input[type=text]:focus,
textarea:focus {
border-color: #4697e4;
}
#userNotificationsWrapper {
margin: 0 auto;
background-color: #ffffff;
border: 1px solid #C7CDD1;
font-family: Acme;
font-size: 18px;
padding-left: 10px;
}
/* line 16, /Users/nataliab/Documents/workspace/myproject/app/assets/stylesheets/user_notifications.css.scss */
h2 {
font-size: 18px;
font-family: Manuelle;
text-align: center;
}
@media (max-width: 1200px) {
/* line 23, /Users/nataliab/Documents/workspace/myproject/app/assets/stylesheets/user_notifications.css.scss */
#userNotificationsTableWrapper {
width: 100%;
}
}
/* line 28, /Users/nataliab/Documents/workspace/myproject/app/assets/stylesheets/user_notifications.css.scss */
#userNotificationsTable {
width: 100%;
}
/* line 32, /Users/nataliab/Documents/workspace/myproject/app/assets/stylesheets/user_notifications.css.scss */
#userNotificationsTable tr {
text-align: left;
min-height: 30px;
}
/* line 37, /Users/nataliab/Documents/workspace/myproject/app/assets/stylesheets/user_notifications.css.scss */
#userNotificationsTable thead {
background-color: grey;
color: #fff;
}
/* line 42, /Users/nataliab/Documents/workspace/myproject/app/assets/stylesheets/user_notifications.css.scss */
#userNotificationsTable tr th {
font-weight: bold;
}
/* line 46, /Users/nataliab/Documents/workspace/myproject/app/assets/stylesheets/user_notifications.css.scss */
.currency-row img,
.currency-row .name {
vertical-align: middle;
}
/* line 50, /Users/nataliab/Documents/workspace/myproject/app/assets/stylesheets/user_notifications.css.scss */
.currency-row {
border-bottom: 1px solid #C7CDD1;
}
/* line 54, /Users/nataliab/Documents/workspace/myproject/app/assets/stylesheets/user_notifications.css.scss */
.currency-row img,
.currency-row .name {
vertical-align: middle;
}
/* line 58, /Users/nataliab/Documents/workspace/myproject/app/assets/stylesheets/user_notifications.css.scss */
.currency-row td {
padding: 12px 0 12px 0;
}
/* line 62, /Users/nataliab/Documents/workspace/myproject/app/assets/stylesheets/user_notifications.css.scss */
#userNotificationsTable th {
padding: 12px 0 12px 0;
}
/* line 66, /Users/nataliab/Documents/workspace/myproject/app/assets/stylesheets/user_notifications.css.scss */
#userNotificationsTable th:first-child {
padding-left: 10px;
}
/* line 70, /Users/nataliab/Documents/workspace/myproject/app/assets/stylesheets/user_notifications.css.scss */
.currency-row td:first-child {
padding-left: 10px;
}
/*
.currency-row td:last-child {
padding-right:5px;
}
*/
/* line 79, /Users/nataliab/Documents/workspace/myproject/app/assets/stylesheets/user_notifications.css.scss */
.currency-title {
white-space: nowrap;
}
/* line 84, /Users/nataliab/Documents/workspace/myproject/app/assets/stylesheets/user_notifications.css.scss */
.arrow-up {
width: 0;
height: 0;
border-left: 8px solid transparent;
border-right: 8px solid transparent;
border-bottom: 8px solid black;
vertical-align: middle;
display: inline-block;
}
/* line 94, /Users/nataliab/Documents/workspace/myproject/app/assets/stylesheets/user_notifications.css.scss */
.arrow-down {
width: 0;
height: 0;
border-left: 8px solid transparent;
border-right: 8px solid transparent;
border-top: 8px solid #f00;
vertical-align: middle;
display: inline-block;
}
/* line 104, /Users/nataliab/Documents/workspace/myproject/app/assets/stylesheets/user_notifications.css.scss */
#createBtn {
margin-bottom: 20px;
padding: 15px;
display: inline-block;
border-radius: 5px;
border: 1px solid #7ac9b7;
background-color: #4180C5;
color: aliceblue;
text-decoration: none;
font-size: 15px;
cursor: pointer;
}
/* line 117, /Users/nataliab/Documents/workspace/myproject/app/assets/stylesheets/user_notifications.css.scss */
#createBtn:hover {
background-color: black;
}
/* line 121, /Users/nataliab/Documents/workspace/myproject/app/assets/stylesheets/user_notifications.css.scss */
.buttonCreate {
width: 30%;
margin: 10px auto;
display: block;
}
/* line 127, /Users/nataliab/Documents/workspace/myproject/app/assets/stylesheets/user_notifications.css.scss */
#userNotificationForm {
background-color: #fff;
display: inline-block;
text-align: left;
}
@import url("http://fonts.googleapis.com/css?family=Lato");
/* line 11, /Users/nataliab/Documents/workspace/myproject/app/assets/stylesheets/styled_select.css.scss */
.selectMenu {
font-family: 'Oxygen', sans-serif;
font-size: 20px;
height: 50px;
-webkit-appearance: menulist-button;
}
/* line 18, /Users/nataliab/Documents/workspace/myproject/app/assets/stylesheets/styled_select.css.scss */
.select-hidden {
display: none;
visibility: hidden;
padding-right: 10px;
}
/* line 24, /Users/nataliab/Documents/workspace/myproject/app/assets/stylesheets/styled_select.css.scss */
.select {
cursor: pointer;
display: inline-block;
position: relative;
font-size: 16px;
color: #fff;
width: 220px;
height: 42px;
margin-bottom: 20px;
margin-top: 10px;
}
/* line 35, /Users/nataliab/Documents/workspace/myproject/app/assets/stylesheets/styled_select.css.scss */
.select-styled {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-color: gray;
padding: 11px 12px;
-moz-transition: all 0.2s ease-in;
-o-transition: all 0.2s ease-in;
-webkit-transition: all 0.2s ease-in;
transition: all 0.2s ease-in;
}
/* line 44, /Users/nataliab/Documents/workspace/myproject/app/assets/stylesheets/styled_select.css.scss */
.select-styled:after {
content: "";
width: 0;
height: 0;
border: 7px solid transparent;
border-color: #fff transparent transparent transparent;
position: absolute;
top: 16px;
right: 10px;
}
/* line 54, /Users/nataliab/Documents/workspace/myproject/app/assets/stylesheets/styled_select.css.scss */
.select-styled:hover {
background-color: #7b7b7b;
}
/* line 57, /Users/nataliab/Documents/workspace/myproject/app/assets/stylesheets/styled_select.css.scss */
.select-styled:active,
.select-styled.active {
background-color: #737373;
}
/* line 59, /Users/nataliab/Documents/workspace/myproject/app/assets/stylesheets/styled_select.css.scss */
.select-styled:active:after,
.select-styled.active:after {
top: 9px;
border-color: transparent transparent #fff transparent;
}
/* line 66, /Users/nataliab/Documents/workspace/myproject/app/assets/stylesheets/styled_select.css.scss */
.select-options {
display: none;
position: absolute;
top: 100%;
right: 0;
left: 0;
z-index: 999;
margin: 0;
padding: 0;
list-style: none;
background-color: #737373;
overflow: scroll;
}
/* line 81, /Users/nataliab/Documents/workspace/myproject/app/assets/stylesheets/styled_select.css.scss */
.select-options li {
margin: 0;
padding: 12px 0;
text-indent: 15px;
border-top: 1px solid #676767;
-webkit-transition: all 0.15s ease-in;
transition: all 0.15s ease-in;
}
/* line 90, /Users/nataliab/Documents/workspace/myproject/app/assets/stylesheets/styled_select.css.scss */
.select-options li.selected {
color: gray;
background: #fff;
}
/* line 95, /Users/nataliab/Documents/workspace/myproject/app/assets/stylesheets/styled_select.css.scss */
.select-options li[rel="hide"] {
display: none;
}
/* line 99, /Users/nataliab/Documents/workspace/myproject/app/assets/stylesheets/styled_select.css.scss */
ul.select-options {
max-height: 15em;
overflow-y: scroll;
overflow-x: hidden;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="content">
<div id="userNotificationForm">
<form class="new_user_notification" id="new_user_notification" action="/user_notifications" accept-charset="UTF-8" method="post"><input name="utf8" type="hidden" value="✓" /><input type="hidden" name="authenticity_token" value="nZlQSEjw1o/7DxxOAUmFWJiXr5ZqPodX2tBcCs2qshqLVhM8U/WXuBWocICXDmYOoBnAjhvrEIat972+SkQKEQ==" />
<div class="field">
<label for="user_notification_price">Label</label> <span class="required">*</span> <br>
<input size="30" type="text" name="user_notification[price]" id="user_notification_price" />
</div>
<div class="field">
<label for="user_notification_buy">Condition</label> <span class="required">*</span> <br>
<select name="user_notification[buy]" id="user_notification_buy"><option value="">Select Notification Time</option>
<option value="false">Above</option>
<option value="true">Below</option></select>
<p class='error'></p>
</div>
<div class="actions buttonContainer">
<input type="submit" name="commit" value="Submit" id="submit" class="button btn" data-disable-with="Submit" />
</div>
</form>
</div>
</div> 这篇关于如何在Chrome中将样式选择菜单设置为父容器宽度的100％?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！