CSS 设计文本对齐显示更多

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>

我似乎无法弄清楚这一点，但我的代码中存在设计缺陷，它一直困扰着我。

问题

当我点击显示更多项目时，它显示了文本但与之前的文本不对齐 text.So 当我点击显示更多时，它应该填充到 h4 中的 ul 的宽度但是它设置打开它自己的框，不管我做什么 <p> 里面的文本都不想继承到 ul 父级的宽度。有什么想法吗？

Answer 1

试试这个：

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

CSS 设计文本对齐显示更多

CSS design text-alignment with showing more

html

css

text-alignment