2015-05-09 77 views
-1

其實我不知道如何搜索這個問題,如果它是CSS或PHP的問題。 我有一個div打開一個隱藏的div。 當我測試網站外的代碼時,它工作正常。當我在網站內測試時,我拿着這個。 看到圖片瀏覽(http://grab.by/H8TWphp文本不正確顯示

代碼的完整結構是:

<ol> 
<div><div> 
<div></div> 
<div> 
<li> 
<div class="lyrics"> 
<article> 
<input type="checkbox" id="read_more" role="button"> 
<label for="read_more" onclick=""><span>Lyrics</span><span>Hide Lyrics</span></label> 
<section></section>  
<section><?php $lyric = get_post_meta(get_the_ID(), '_lyrics', true); echo $lyric; ?> 
</section> 
</article>​ 
</div> 
</div> 
</li> 
</ol> 

CSS

div.lyrics { 
position: relative; 
top: 10px; 
} 

article { 
    margin-bottom: 3rem; 
    position: relative; 
    *zoom: 1; 
} 

article:before, article:after { 
    content: ""; 
    display: block; 
} 

article:after { clear: both } 

article figure { 
    float: right; 
    width: 32.5%; 
} 

article section:first-of-type { 
    float: left; 
    width: 62.5%; 
} 

article section:last-of-type { 
    display: none; 
    visibility: hidden; 

} 

section { 
    -webkit-transition: .125s linear; 
    -moz-transition: .125s linear; 
    -ms-transition: .125s linear; 
    -o-transition: .125s linear; 
    transition: .125s linear; 
} 

input[type=checkbox] { 
    border: 0; 
    clip: rect(0 0 0 0); 
    height: 1px; 
    width: 1px; 
    margin: -1px; 
    overflow: hidden; 
    padding: 0; 
    position: absolute; 
} 

[for="read_more"] { 
    position: absolute; 
    bottom: -3rem; 
    left: 0; 
    width: 100%; 
    text-align: center; 
    padding: .65rem; 
    box-shadow: inset 1px 1px rgba(0, 0, 0, 0.1), inset -1px -1px rgba(0, 0, 0, 0.1); 
} 

[for="read_more"]:hover { 
    background: rgba(0,0,0,.5); 
    color: rgb(255,255,255); 
} 

[for="read_more"] span:last-of-type { 
    display: none; 
    visibility: hidden; 
} 

input[type=checkbox]:checked ~ section { 
    display: block; 
    visibility: visible; 
    width: 100%; 
} 

input[type=checkbox]:checked ~ figure { width: 100% } 

input[type=checkbox]:checked ~ [for="read_more"] span:first-of-type { 
    display: none; 
    visibility: hidden; 
} 

input[type=checkbox]:checked ~ [for="read_more"] span:last-of-type { 
    display: block; 
    visibility: visible; 
} 

感謝您的幫助!

+0

替換'<?php $ lyric = get_post_meta(get_the_ID(),'_lyrics',true); echo $ lyric;用一些實際的文本看看是否會發生同樣的情況。如果是,你可以確認這是由於你的CSS出現了一些錯誤。 – Lal

+0

好的我試過了,結果比以前更糟!與實際的文字它只來到一行 – user2078690

+0

可能是您的CS的問題..你可以請張貼你的CSS .. – Lal

回答

0

問題的解決方案來自文本編輯器,我在這裏使用每個中斷的輸入(< br>)我想要的!所以每個文本行都是一段(< p>)。