gpt4 book ai didi

javascript - 不保持内联 - Javascript

转载 作者:行者123 更新时间:2023-11-27 23:35:15 24 4
gpt4 key购买 nike

我有一些选择和一个 <img>并且我在 javascript 中制作了所有元素,因为只有在单独的按钮单击时才会添加这些元素,并且不会影响下面的代码,因为我尝试过和没有尝试过,我得到了相同的结果。这是我也包含为 JSBin 的 html、css 和 Javascript因为它清楚地显示了问题,目前我已经在 Chrome 和 IE 上进行了测试,它在 Chrome 上运行良好但在 IE 11.0.96 上中断,发生的情况是我有一个 select然后 img然后 select我想要 img在第一个选择旁边并有下一个 select下面,像这样

enter image description here

但在 IE 上,按钮会越过第二个 select

这里是代码

<body>
<div id="hours_div"></div>

</body>

CSS:

#info_add_hours {
width: 50%;
}

.time_p {
display:inline;
margin-left:5px;
margin-right:5px;
}

.time_colon {
display:inline;
margin-left:5px;
margin-right:5px;

}

#hours_div select {

width: 88%;
}

#time_delete_small {
width:40px;
display:inline;
padding:5px;
margin-left:20px;
cursor: pointer;
position:absolute;

}

#hours_div .time_select {
width:23%;
}


#hours_div .ampm_select {
margin-left:5px;
width:23%;
}

JavaScript

function el(id) {
return document.getElementById(id);
} // Get elem by ID


var numOfHours = 0;

var div = document.createElement("DIV");
var div_id = "div_hours_" + numOfHours;
div.id = div_id;

//WEEKDAY
var select = document.createElement("SELECT");
var option_mon = document.createElement("OPTION");
option_mon.value = "monday";
var monday = document.createTextNode("Monday");
var option_tue = document.createElement("OPTION");
option_tue.value = "tuesday";
var tuesday = document.createTextNode("Tuesday");
var option_wed = document.createElement("OPTION");

option_mon.appendChild(monday);
option_tue.appendChild(tuesday);

select.appendChild(option_mon);
select.appendChild(option_tue);


//OPEN HOUR
var select_hour_open = document.createElement("SELECT");
select_hour_open.className = 'time_select';
var option_1_open = document.createElement("OPTION");
option_1_open.value = "1";
var option_1_text_open = document.createTextNode("1");
option_1_open.appendChild(option_1_text_open);
var option_2_open = document.createElement("OPTION");
option_2_open.value = "2";
var option_2_text_open = document.createTextNode("2");
option_2_open.appendChild(option_2_text_open);

select_hour_open.appendChild(option_1_open);
select_hour_open.appendChild(option_2_open);


var p_to = document.createElement("P");
p_to.className = 'time_p';
var to_text = document.createTextNode("to");
p_to.appendChild(to_text);




var close_img = document.createElement("IMG");
close_img.src = 'http://findicons.com/files/icons/2338/reflection/128/button_delete.png';
close_img.id = 'time_delete_small';



div.appendChild(select);
div.appendChild(close_img);

div.appendChild(select_hour_open);



div.appendChild(p_to);



el("hours_div").appendChild(div);

那么为什么按钮会越过第二个选择的顶部?

感谢帮助

最佳答案

差异似乎是因为 IE 将 IMG 元素定位为相对于其包含 block (DIV #div_hours_0) 的 block 元素,而 Firefox(至少)看起来是将 IMG 元素相对于它所在的位置定位在没有定位的情况下会出现内联。 (我不知道这是否符合标准。)

更改显示以阻止并添加“left”和“margin-top”规则:

#time_delete_small {
width:40px;
display:block;
padding:5px;
margin-left:20px;
cursor: pointer;
position:absolute;
left: 88%;
margin-top: -10px;
}

似乎将帖子中显示的布局创建为正确的布局。一定要根据您的目的对它们进行试验和调整!

关于javascript - <IMG> 不保持内联 - Javascript,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34101787/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com