CSS Design Text-Ausrichtung mit mehr zeigt

Question

.read-more-state { 
 
    display: none; 
 
} 
 
.read-more-wrap { 
 
    width: 100%; 
 
} 
 
.read-more-target { 
 
    opacity: 0; 
 
    max-height: 0; 
 
    font-size: 0; 
 
    transition: .5s ease; 
 
    width: 100%; 
 
} 
 
.read-more-state:checked ~ .read-more-wrap .read-more-target { 
 
    opacity: 1; 
 
    font-size: inherit; 
 
    max-height: 999em; 
 
} 
 
.read-more-state ~ .read-more-trigger:before { 
 
    content: 'Our Story'; 
 
    border: 2px solid; 
 
    padding: 3px; 
 
    border-spacing: 0.1em; 
 
    border-radius: 0.25em; 
 
} 
 
.read-more-state:checked ~ .read-more-trigger:before { 
 
    content: 'Close'; 
 
    border: 2px solid; 
 
    padding: 3px; 
 
    border-spacing: 0.1em; 
 
    border-radius: 0.25em; 
 
} 
 
.read-more-trigger { 
 
    padding-left: 450px; 
 
    cursor: pointer; 
 
    display: inline-block; 
 
    color: #666; 
 
    font-size: .9em; 
 
    line-height: 2; 
 
} 
 
.am-content-container { 
 
    max-width: 1100px; 
 
    margin: auto; 
 
} 
 
.hcentered { 
 
    margin-left: auto; 
 
    margin-right: auto; 
 
} 
 
.pure-g { 
 
    text-rendering: optimizespeed; 
 
    font-family: 'Roboto', sans-serif; 
 
    display: -webkit-flex; 
 
    -webkit-flex-flow: row wrap; 
 
} 
 
.pure-g > * { 
 
    box-sizing: border-box; 
 
} 
 
.pure-u { 
 
    zoom: 1; 
 
    display: inline-block; 
 
    word-spacing: normal; 
 
    letter-spacing: normal; 
 
    text-rendering: auto; 
 
    vertical-align: top; 
 
} 
 
.image-row { 
 
    margin-bottom: 0px; 
 
} 
 
@media only all and (min-width:980px) { 
 
    .grid-sizer, .grid-item { 
 
     width: 16.67%; 
 
    } 
 
} 
 
@media only all and (min-width:980px) { 
 
    .grid-item.col-2 { 
 
     width: 33%; 
 
    } 
 
} 
 
.bot { 
 
    margin: 0 10px 20px 10px; 
 
    pointer-events: all; 
 
    z-index: -1; 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    width: 100%; 
 
    height: 100%; 
 
    background: transparent; 
 
} 
 
.text-justified { 
 
    color: #777; 
 
} 
 
h4 { 
 
    padding-left: 50px; 
 
    text-transform: none; 
 
    font-weight: 300; 
 
    line-height: 1.8em; 
 
    font-family: 'Roboto', sans-serif; 
 
    margin: 1.33em; 
 
    padding-bottom: 20px; 
 
}

<div class = "pure-g hcentered"> 
 
    <div class = "pure-u-1 pure-u-md-1-12"> 
 
    </div> 
 
    <div class = "pure-u-1 pure-u-md-5-6"></div> 
 
    <h4 class = "text-justified gray"> 
 
    <b>Molecular simulations simplified</b>. Macromoltek's mission is to provide easy-to-use scientific software. Our vision is to help researchers make new discoveries       by keeping the focus on their science. 
 
    <br> 
 
    <br> 
 
    <b>About our products:</b> 
 
    <br> 
 
    <br> 
 
    Macromoltek provides an Online Workspace for Antibody Analysis and Modeling. 
 
    We help researchers analyze potential antibody drug targets. We do this by providing users a web interface to our bioinformatics and molecular modeling software:       SmrtMol. 
 
    <input type="checkbox" class="read-more-state" id="post-2" /> 
 
    <ul class = "read-more-wrap"> 
 
     <p class = "read-more-target" style = "list-style: none;"> <br><br>Macromoltek was founded in fall of 2010 by Monica Berrondo (current CEO) to address the        growing need for easy-to-use antibody modeling software. After overcoming some roadblocks in getting started, she started development of a novel structure prediction      software package in spring of 2011. Shortly thereafter, Susana Kaufmann (current CFO) joined Macromoltek to help with the                 everyday operations and software development and testing. They worked tirelessly over the next 6 months to develop, test, and                benchmark an algorithm for predicting structures of antibody sequences. This website, www.macromoltek.com was launched at the end               of 2011 as the primary graphical user interface to all of Macromoltek's products and services.</p> 
 
    </ul> 
 
    <label for="post-2" class="read-more-trigger"></label> 
 
    </h4> 
 
</div>

Ich kann das nicht scheinen, um herauszufinden, aber ich habe ein Design-Fehler in meinem Code und es hat mich nervt.

Das Problem

Als ich die Show mehr Artikel klicken, wird der Text zeigt, aber nicht in Übereinstimmung mit dem vorherigen text.So, wenn ich die Show mehr klicken, sollte es auf die Breite der ul füllen in h4, aber es richtet sich eine eigene Box und egal was ich tue <p> mit dem Text im Inneren will nicht auf die Breite der Eltern zu erben. Irgendwelche Ideen?

Answer 1

versuchen Sie dies:

.read-more-wrap { 
    padding: 0; 
}