本文介绍了CSS：显示上层元素后，显示下层元素的错误信息的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
正如你在我的代码片段中看到的，当按钮被隐藏时=> display：none; 我的显示器是我想要的。但显示他们后，我的显示器变得一团糟（尤其是在大于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 * {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).
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：显示上层元素后，显示下层元素的错误信息的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！
10-30 04:29