CSS：显示上层元素后，显示下层元素的错误信息 [英] CSS: corrupt display for lower elements after show upper elements
本文介绍了CSS：显示上层元素后，显示下层元素的错误信息的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
正如你在我的代码片段中看到的，当按钮被隐藏时=> display：none; 我的显示器是我想要的。但显示他们后，我的显示器变得一团糟（尤其是在大于1300显示器）。
我的代码有两个显示器（大于1300 ）和（小于1300）。
请纠正我的代码，以便在两种情况下创建相同的显示（带按钮和不带他们）
* {margin：0;填充：0; z-index：0; position：relative;} body {min-width：600px; max-width：2000px;背景：＃444;填充 - 左侧：5％自动; padding-top：20px;} ul {width：90％; margin：0px auto;} li {list-style-type：none; overflow：hidden;} li.btn {text-align：center;填充：10px;显示：块;背景：#ccc; padding-top：10px; padding-bottom：12px;文字修饰：无; font-weight：bold; font-family：calibri; font-size：20px;}。separator {margin：5px auto; padding-top：10px; padding-bottom：10px;背景：＃E85039; overflow：visible;}。separator a {text-align：center;显示：块;文字修饰：无; font-weight：bold; font-size：30px;白颜色; text-shadow：2px 0 0 black，-2px 0 0 black，0 2px 0 black，0 -2px 0 black，1px 1px black，-1px -1px 0 black，1px -1px 0 black，-1px 1px 0 black;} ul> li> input {background：none;宽度：5％;最小宽度：50px;身高：100％;顶部：-33px; z-index：100; font-size：20px; margin：3px auto;} input.l {float：left; left：2％;} input.r {float：right;右：2％;} div> .lnk {display：block; font-weight：bold; text-indent：15px;} div> .lnk a {padding-top：10px; padding-bottom：12px;显示：块;文字修饰：无; font-family：calibri; font-size：20px;} @ media all and（min-width：1300px）{.lnk {min-width：48％;向左飘浮; } div> .lnk p {display：inline; } div> .lnk：nth-child（4n + 1）{margin：0％2％; } div> .lnk：n-child（4n + 3）{margin-right：2％;余量：1％;宽度：48％; } .separator {清除：两者;宽度：100％;显示：块; } div> .lnk：nth-child（4n + 1）a，div> .lnk：nth-child（4n + 4）a {background：＃848484;颜色：＃F69C12; } div> .lnk：nth-child（4n + 2）a，div> .lnk：nth-child（4n + 3）a {background：＃F8F8F8;颜色：黑色; } div> .lnk：last-child：not（：nth-child（偶数））{width：98％; border-top：3px虚线白色; }} @ media all和（max-width：1299px）{.lnk {width：100％; } div> .lnk：nth-child（odd）a {color：＃F69C12;背景：＃848484; } div> .lnk：nth-child（偶数）a {background：＃F8F8F8;颜色：黑色; }} div> .lnk：last-child {margin-bottom：15px;}
< UL> < li class =btnid =1onclick =btn_H_S（this.id）>>单击显示或隐藏按钮<< br /> < /锂> < li class =separator> < a href => < ----------------按钮----------------> < / A> < input class =lid =P_jmp1type =buttononclick =Prev（'P_jmp4'）value =<<> < input class =rid =N_jmp1type =buttononclick =Next（this.id）value =>>> < /锂> < DIV> < li class =lnk>< a href =>按钮apear后显示错误< / a> < /锂> < / DIV> < li class =separator> < a href => < ----------------按钮----------------> < / A> < input class =lid =P_jmp2type =buttononclick =Prev（this.id）value =<<> < input class =rid =N_jmp2type =buttononclick =Next（this.id）value =>>> < /锂> < DIV> < li class =lnk>< a href =>按钮apear后显示错误< / a> < /锂> < li class =lnk>< a href =>按钮apear后显示错误< / a> < /锂> < li class =lnk>< a href =>按钮apear后显示错误< / a> < /锂> < li class =lnk>< a href =>按钮apear后显示错误< / a> < /锂> < li class =lnk>< a href =>按钮apear后显示错误< / a> < /锂> < li class =lnk>< a href =>按钮apear< / a>后显示错误< /锂> < li class =lnk>< a href =>按钮apear后显示错误< / a> < /锂> < li class =lnk>< a href =>按钮apear后显示错误< / a> < /锂> < / DIV> < li class =separator> < a href => < ----------------按钮----------------> < / A> < input class =lid =P_jmp3type =buttononclick =Prev（this.id）value =<<> < input class =rid =N_jmp3type =buttononclick =Next（'N_jmp0'）value =>>> < /锂> < DIV> < li class =lnk>< a href =>按钮apear后显示错误< / a> < /锂> < li class =lnk>< a href =>按钮apear后显示错误< / a> < /锂> < li class =lnk>< a href =>按钮apear后显示错误< / a> < /锂> < / div>< / ul>
解决方案最后我设法完全纠正了我的代码。这是最终的演示
function Prev（current）{var prev_s = current.match（/ \d / g）; prev_s = prev_s.join（）; prev_s--; prev_s ='P_jmp'+ prev_s; document.getElementById（prev_s）.scrollIntoView（）;}函数Next（current）{var next_s = current.match（/ \d / g）; next_s = next_s.join（）; next_s ++; next_s ='N_jmp'+ next_s; document.getElementById（next_s）.scrollIntoView（）;}函数btn_H_S（div_id）{document.getElementById（div_id）.id =（div_id *（-1））; if（div_id ==1）{for（x = 1; x <14; x ++）{document.getElementById（P_jmp+ x）.style.display =none; document.getElementById（N_jmp+ x）.style.display =none;如果（div_id ==-1）{for（x = 1; x <14; x ++）{document.getElementById（P_jmp+ x）.style.display =block; document.getElementById（N_jmp+ x）.style.display =inline; }}}
* {margin：0;填充：0; z-index：0; position：relative;} body {min-width：600px; max-width：2000px;背景：＃444;填充 - 左侧：5％自动; padding-top：20px;} ul {width：90％; margin：0px auto;} li {list-style-type：none; overflow：hidden;} li.btn {text-align：center;显示：块;背景：#ccc; padding-top：10px; padding-bottom：12px; margin-bottom：20px;文字修饰：无; font-weight：bold; font-family：calibri; font-size：20px;}。separator {margin：5px auto; padding-top：10px; padding-bottom：10px;背景：＃E85039; overflow：visible;}。separator a {text-align：center;显示：块;文字修饰：无; font-weight：bold; font-size：30px;白颜色; text-shadow：2px 0 0 black，-2px 0 0 black，0 2px 0 black，0 -2px 0 black，1px 1px black，-1px -1px 0 black，1px -1px 0 black，-1px 1px 0 black;} ul> li> input {position：absolute;背景：无;宽度：5％;最小宽度：50px;身高：100％; top：12px; z-index：100; font-size：20px; height：30px;} input.l {float：left; left：2％;} input.r {float：right; right：2％;} li + div {clear：both;} div> .lnk {display：block; font-weight：bold; text-indent：15px;} div> .lnk a {padding-top：10px; padding-bottom：12px;显示：块;文字修饰：无; font-family：calibri; font-size：20px;} @ media all and（min-width：1300px）{.lnk {min-width：48％;向左飘浮; } div> .lnk p {display：inline; } div> .lnk：nth-child（4n + 1）{margin：0％2％; } div> .lnk：n-child（4n + 3）{margin-right：2％; margin-left：1％;宽度：48％; } .separator {清除：两者;宽度：100％;显示：块; } div> .lnk：nth-child（4n + 1）a，div> .lnk：nth-child（4n + 4）a {background：＃848484;颜色：＃F69C12; } div> .lnk：nth-child（4n + 2）a，div> .lnk：nth-child（4n + 3）a {background：＃F8F8F8;颜色：黑色; } div> .lnk：last-child：not（：nth-child（偶数））：not（：first-child）{border-top：3px dashed white; } div> .lnk：last-child：not（：nth-child（偶数））{width：98％; }} @ media all和（max-width：1299px）{.lnk {width：100％; } div> .lnk：nth-child（odd）a {color：＃F69C12;背景：＃848484; } div> .lnk：nth-child（偶数）a {background：＃F8F8F8;颜色：黑色; }} div> .lnk：nth-child（1），div> .lnk：nth-child（2）{margin-top：15px;} div> .lnk：last-child，div> .lnk：nth-last-child（2）：not（：nth-child（偶数））{margin-bottom：15px;}
< ul> < li class =btnid =1onclick =btn_H_S（this.id）>>点击显示或隐藏按钮<< br /> < /锂> < li class =separator> < a href => < ----------------按钮----------------> < / A> < input class =lid =P_jmp1type =buttononclick =Prev（'P_jmp4'）value =<<> < input class =rid =N_jmp1type =buttononclick =Next（this.id）value =>>> < /锂> < DIV> < li class =lnk>< a href =>按钮apear后显示错误< / a> < /锂> < / DIV> < li class =separator> < a href => < ----------------按钮----------------> < / A> < input class =lid =P_jmp2type =buttononclick =Prev（this.id）value =<<> < input class =rid =N_jmp2type =buttononclick =Next（this.id）value =>>> < /锂> < DIV> < li class =lnk>< a href =>按钮apear后显示错误< / a> < /锂> < li class =lnk>< a href =>按钮apear后显示错误< / a> < /锂> < li class =lnk>< a href =>按钮apear后显示错误< / a> < /锂> < li class =lnk>< a href =>按钮apear< / a>后显示错误< /锂> < li class =lnk>< a href =>按钮apear后显示错误< / a> < /锂> < li class =lnk>< a href =>按钮apear< / a>后显示错误< /锂> < li class =lnk>< a href =>按钮apear后显示错误< / a> < /锂> < li class =lnk>< a href =>按钮apear< / a>后显示错误< /锂> < li class =lnk>< a href =>按钮apear< / a>后显示错误< /锂> < li class =lnk>< a href =>按钮apear< / a>后显示错误< /锂> < li class =lnk>< a href =>按钮apear< / a>后显示错误< /锂> < li class =lnk>< a href =>按钮apear< / a>后显示错误< /锂> < li class =lnk>< a href =>按钮apear< / a>后显示错误< /锂> < li class =lnk>< a href =>按钮apear后显示错误< / a> < /锂> < li class =lnk>< a href =>按钮apear< / a>后显示错误< /锂> < li class =lnk>< a href =>按钮apear< / a>后显示错误< /锂> < li class =lnk>< a href =>按钮apear< / a>后显示错误< /锂> < li class =lnk>< a href =>按钮apear< / a>后显示错误< /锂> < li class =lnk>< a href =>按钮apear< / a>后显示错误< /锂> < li class =lnk>< a href =>按钮apear< / a>后显示错误< /锂> < / DIV> < li class =separator> < a href => < ----------------按钮----------------> < / A> < input class =lid =P_jmp3type =buttononclick =Prev（this.id）value =<<> < input class =rid =N_jmp3type =buttononclick =Next（'N_jmp0'）value =>>> < /锂> < DIV> < li class =lnk>< a href =>按钮apear< / a>后显示错误< /锂> < li class =lnk>< a href =>按钮apear< / a>后显示错误< /锂> < li class =lnk>< a href =>按钮apear< / a>后显示错误< /锂> < / div>< / ul>
as you see in my snippet when buttons are hidden => display:none; my display was what i want. but after showing them my display became a mess (Especially in bigger than 1300" Display).
my code has two display (bigger than 1300") and (smaller than 1300").
please correct my codes for create same display in both case (with buttons & without them)
function Prev(current) {
var prev_s = current.match(/\d/g);
prev_s = prev_s.join("");
prev_s--;
prev_s = 'P_jmp' + prev_s;
document.getElementById(prev_s).scrollIntoView();
}
function Next(current) {
var next_s = current.match(/\d/g);
next_s = next_s.join("");
next_s++;
next_s = 'N_jmp' + next_s;
document.getElementById(next_s).scrollIntoView();
}
function btn_H_S(div_id) {
document.getElementById(div_id).id = (div_id * (-1));
if (div_id == "1") {
for (x = 1; x < 14; x++) {
document.getElementById("P_jmp" + x).style.display = "none";
document.getElementById("N_jmp" + x).style.display = "none";
}
}
if (div_id == "-1") {
for (x = 1; x < 14; x++) {
document.getElementById("P_jmp" + x).style.display = "block";
document.getElementById("N_jmp" + x).style.display = "inline";
}
}
}
* {
margin: 0;
padding: 0;
z-index: 0;
position: relative;
}
body {
min-width: 600px;
max-width: 2000px;
background: #444;
padding-left: 5% auto;
padding-top: 20px;
}
ul {
width: 90%;
margin: 0px auto;
}
li {
list-style-type: none;
overflow: hidden;
}
li.btn {
text-align: center;
padding: 10px;
display: block;
background: #ccc;
padding-top: 10px;
padding-bottom: 12px;
text-decoration: none;
font-weight: bolder;
font-family: calibri;
font-size: 20px;
}
.separator {
margin: 5px auto;
padding-top: 10px;
padding-bottom: 10px;
background: #E85039;
overflow: visible;
}
.separator a {
text-align: center;
display: block;
text-decoration: none;
font-weight: bolder;
font-size: 30px;
color: white;
text-shadow: 2px 0 0 black, -2px 0 0 black, 0 2px 0 black, 0 -2px 0 black, 1px 1px black, -1px -1px 0 black, 1px -1px 0 black, -1px 1px 0 black;
}
ul>li>input {
background: none;
width: 5%;
min-width: 50px;
height: 100%;
top: -33px;
z-index: 100;
font-size: 20px;
margin: 3px auto;
}
input.l {
float: left;
left: 2%;
}
input.r {
float: right;
right: 2%;
}
div > .lnk {
display: block;
font-weight: bolder;
text-indent: 15px;
}
div > .lnk a {
padding-top: 10px;
padding-bottom: 12px;
display: block;
text-decoration: none;
font-family: calibri;
font-size: 20px;
}
@media all and (min-width: 1300px) {
.lnk {
min-width: 48%;
float: left;
}
div > .lnk p {
display: inline;
}
div > .lnk:nth-child(4n+1) {
margin: 0% 2%;
}
div > .lnk:nth-child(4n+3) {
margin-right: 2%;
margin-left: 1%;
width: 48%;
}
.separator {
clear: both;
width: 100%;
display: block;
}
div > .lnk:nth-child(4n+1) a,
div > .lnk:nth-child(4n+4) a {
background: #848484;
color: #F69C12;
}
div > .lnk:nth-child(4n+2) a,
div > .lnk:nth-child(4n+3) a {
background: #F8F8F8;
color: black;
}
div > .lnk:last-child:not(:nth-child(even)) {
width: 98%;
border-top: 3px dashed white;
}
}
@media all and (max-width: 1299px) {
.lnk {
width: 100%;
}
div > .lnk:nth-child(odd) a {
color: #F69C12;
background: #848484;
}
div > .lnk:nth-child(even) a {
background: #F8F8F8;
color: black;
}
}
div > .lnk:last-child {
margin-bottom: 15px;
}
<ul>
<li class="btn" id="1" onclick="btn_H_S(this.id)">> Click To Show or Hide Buttons
<<br/>
</li>
<li class="separator">
<a href="">
<----------------Buttons---------------->
</a>
<input class="l" id="P_jmp1" type="button" onclick="Prev('P_jmp4')" value="<<">
<input class="r" id="N_jmp1" type="button" onclick="Next(this.id)" value=">>">
</li>
<div>
<li class="lnk"><a href="">Wrong Display after buttons apear</a>
</li>
</div>
<li class="separator">
<a href="">
<----------------Buttons---------------->
</a>
<input class="l" id="P_jmp2" type="button" onclick="Prev(this.id)" value="<<">
<input class="r" id="N_jmp2" type="button" onclick="Next(this.id)" value=">>">
</li>
<div>
<li class="lnk"><a href="">Wrong Display after buttons apear</a>
</li>
<li class="lnk"><a href="">Wrong Display after buttons apear</a>
</li>
<li class="lnk"><a href="">Wrong Display after buttons apear</a>
</li>
<li class="lnk"><a href="">Wrong Display after buttons apear</a>
</li>
<li class="lnk"><a href="">Wrong Display after buttons apear</a>
</li>
<li class="lnk"><a href="">Wrong Display after buttons apear</a>
</li>
<li class="lnk"><a href="">Wrong Display after buttons apear</a>
</li>
<li class="lnk"><a href="">Wrong Display after buttons apear</a>
</li>
</div>
<li class="separator">
<a href="">
<----------------Buttons---------------->
</a>
<input class="l" id="P_jmp3" type="button" onclick="Prev(this.id)" value="<<">
<input class="r" id="N_jmp3" type="button" onclick="Next('N_jmp0')" value=">>">
</li>
<div>
<li class="lnk"><a href="">Wrong Display after buttons apear</a>
</li>
<li class="lnk"><a href="">Wrong Display after buttons apear</a>
</li>
<li class="lnk"><a href="">Wrong Display after buttons apear</a>
</li>
</div>
</ul>
解决方案
finally i managed to full correct my code. this is final Demo
function Prev(current) {
var prev_s = current.match(/\d/g);
prev_s = prev_s.join("");
prev_s--;
prev_s = 'P_jmp' + prev_s;
document.getElementById(prev_s).scrollIntoView();
}
function Next(current) {
var next_s = current.match(/\d/g);
next_s = next_s.join("");
next_s++;
next_s = 'N_jmp' + next_s;
document.getElementById(next_s).scrollIntoView();
}
function btn_H_S(div_id) {
document.getElementById(div_id).id = (div_id * (-1));
if (div_id == "1") {
for (x = 1; x < 14; x++) {
document.getElementById("P_jmp" + x).style.display = "none";
document.getElementById("N_jmp" + x).style.display = "none";
}
}
if (div_id == "-1") {
for (x = 1; x < 14; x++) {
document.getElementById("P_jmp" + x).style.display = "block";
document.getElementById("N_jmp" + x).style.display = "inline";
}
}
}
* {
margin: 0;
padding: 0;
z-index: 0;
position: relative;
}
body {
min-width: 600px;
max-width: 2000px;
background: #444;
padding-left: 5% auto;
padding-top: 20px;
}
ul {
width: 90%;
margin: 0px auto;
}
li {
list-style-type: none;
overflow: hidden;
}
li.btn {
text-align: center;
display: block;
background: #ccc;
padding-top: 10px;
padding-bottom: 12px;
margin-bottom: 20px;
text-decoration: none;
font-weight: bolder;
font-family: calibri;
font-size: 20px;
}
.separator {
margin: 5px auto;
padding-top: 10px;
padding-bottom: 10px;
background: #E85039;
overflow: visible;
}
.separator a {
text-align: center;
display: block;
text-decoration: none;
font-weight: bolder;
font-size: 30px;
color: white;
text-shadow: 2px 0 0 black, -2px 0 0 black, 0 2px 0 black, 0 -2px 0 black, 1px 1px black, -1px -1px 0 black, 1px -1px 0 black, -1px 1px 0 black;
}
ul>li>input {
position: absolute;
background: none;
width: 5%;
min-width: 50px;
height: 100%;
top: 12px;
z-index: 100;
font-size: 20px;
height: 30px;
}
input.l {
float: left;
left: 2%;
}
input.r {
float: right;
right: 2%;
}
li+div {
clear: both;
}
div > .lnk {
display: block;
font-weight: bolder;
text-indent: 15px;
}
div > .lnk a {
padding-top: 10px;
padding-bottom: 12px;
display: block;
text-decoration: none;
font-family: calibri;
font-size: 20px;
}
@media all and (min-width: 1300px) {
.lnk {
min-width: 48%;
float: left;
}
div > .lnk p {
display: inline;
}
div > .lnk:nth-child(4n+1) {
margin: 0% 2%;
}
div > .lnk:nth-child(4n+3) {
margin-right: 2%;
margin-left: 1%;
width: 48%;
}
.separator {
clear: both;
width: 100%;
display: block;
}
div > .lnk:nth-child(4n+1) a,
div > .lnk:nth-child(4n+4) a {
background: #848484;
color: #F69C12;
}
div > .lnk:nth-child(4n+2) a,
div > .lnk:nth-child(4n+3) a {
background: #F8F8F8;
color: black;
}
div > .lnk:last-child:not(:nth-child(even)):not(:first-child) {
border-top: 3px dashed white;
}
div > .lnk:last-child:not(:nth-child(even)) {
width: 98%;
}
}
@media all and (max-width: 1299px) {
.lnk {
width: 100%;
}
div > .lnk:nth-child(odd) a {
color: #F69C12;
background: #848484;
}
div > .lnk:nth-child(even) a {
background: #F8F8F8;
color: black;
}
}
div > .lnk:nth-child(1),
div > .lnk:nth-child(2) {
margin-top: 15px;
}
div > .lnk:last-child,
div > .lnk:nth-last-child(2):not(:nth-child(even)) {
margin-bottom: 15px;
}
<ul>
<li class="btn" id="1" onclick="btn_H_S(this.id)">> Click To Show or Hide Buttons
<<br/>
</li>
<li class="separator">
<a href="">
<----------------Buttons---------------->
</a>
<input class="l" id="P_jmp1" type="button" onclick="Prev('P_jmp4')" value="<<">
<input class="r" id="N_jmp1" type="button" onclick="Next(this.id)" value=">>">
</li>
<div>
<li class="lnk"><a href="">Wrong Display after buttons apear</a>
</li>
</div>
<li class="separator">
<a href="">
<----------------Buttons---------------->
</a>
<input class="l" id="P_jmp2" type="button" onclick="Prev(this.id)" value="<<">
<input class="r" id="N_jmp2" type="button" onclick="Next(this.id)" value=">>">
</li>
<div>
<li class="lnk"><a href="">Wrong Display after buttons apear</a>
</li>
<li class="lnk"><a href="">Wrong Display after buttons apear</a>
</li>
<li class="lnk"><a href="">Wrong Display after buttons apear</a>
</li>
<li class="lnk"><a href="">Wrong Display after buttons apear</a>
</li>
<li class="lnk"><a href="">Wrong Display after buttons apear</a>
</li>
<li class="lnk"><a href="">Wrong Display after buttons apear</a>
</li>
<li class="lnk"><a href="">Wrong Display after buttons apear</a>
</li>
<li class="lnk"><a href="">Wrong Display after buttons apear</a>
</li>
<li class="lnk"><a href="">Wrong Display after buttons apear</a>
</li>
<li class="lnk"><a href="">Wrong Display after buttons apear</a>
</li>
<li class="lnk"><a href="">Wrong Display after buttons apear</a>
</li>
<li class="lnk"><a href="">Wrong Display after buttons apear</a>
</li>
<li class="lnk"><a href="">Wrong Display after buttons apear</a>
</li>
<li class="lnk"><a href="">Wrong Display after buttons apear</a>
</li>
<li class="lnk"><a href="">Wrong Display after buttons apear</a>
</li>
<li class="lnk"><a href="">Wrong Display after buttons apear</a>
</li>
<li class="lnk"><a href="">Wrong Display after buttons apear</a>
</li>
<li class="lnk"><a href="">Wrong Display after buttons apear</a>
</li>
<li class="lnk"><a href="">Wrong Display after buttons apear</a>
</li>
<li class="lnk"><a href="">Wrong Display after buttons apear</a>
</li>
</div>
<li class="separator">
<a href="">
<----------------Buttons---------------->
</a>
<input class="l" id="P_jmp3" type="button" onclick="Prev(this.id)" value="<<">
<input class="r" id="N_jmp3" type="button" onclick="Next('N_jmp0')" value=">>">
</li>
<div>
<li class="lnk"><a href="">Wrong Display after buttons apear</a>
</li>
<li class="lnk"><a href="">Wrong Display after buttons apear</a>
</li>
<li class="lnk"><a href="">Wrong Display after buttons apear</a>
</li>
</div>
</ul>
这篇关于CSS：显示上层元素后，显示下层元素的错误信息的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
