表示/非表示のメニューをクリックしたときに、テキストが改行する理由

表示/非表示メニューをクリックしてパラテキストを表示すると、パラテキストが約1行で表示されるのはなぜですか？私の推測では、パディングやマージンなどです。表示/非表示のメニューをクリックしたときに、テキストが改行する理由

$(document).on('click touchstart', '.button', function() { 
 
    $('.target-button[data-trigger="' + $(this).attr('id') + '"]').slideToggle(100); 
 
});

#main_text { 
 
    float: none; 
 
} 
 
.scripture { 
 
    width: 100%; 
 
    padding-top: 30px; 
 
} 
 
.scripture ul { 
 
    list-style-type: none; 
 
    margin: 0; 
 
    background-color: black; 
 
    text-align: center; 
 
} 
 
.scripture li { 
 
    display: inline; 
 
    padding-right: 2em; 
 
    font-weight: bold; 
 
} 
 
.scripture a { 
 
    color: white; 
 
} 
 
.scripture h3 { 
 
    padding: 0; 
 
    margin-top: 0; 
 
} 
 
.scripture h2 { 
 
    margin: 0; 
 
    padding: 0; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div class="scripture"> 
 
    <UL> 
 
    <li><a id="one" class="button">Expand/Contract</a> 
 
    </li> 
 
    </UL> 
 

 
    <div class="one"> 
 
    <h2>Lively Bones</h2> 
 
    <h3>John 11:1-44</h3> 
 

 
    <div class="target-button" data-trigger="one" style="display:none;"> 
 
     <div id="one1"> 
 

 
     <P>“Ezekiel connected them dry bones, Ezekiel connected them dry bones, Ezekiel connected them dry bones, Now hear the word of the Lord.”</P> 
 

 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

出典

2016-05-12 Chris