0

履歴書のページを作りたいです。ここにjsfiddleがあります

次のようになります。

<section class="ResumeItem">
    <header class="ResumeContentTitle" id="ResumeKnowledgeHeader">
         <p>Professional Knowledge</p>
    </header>
    <section>
         <section class="skills">
                        <header>
                            <h3>Strong Skills</h3>
                        </header>
                        <ul>
                            <li>PHP</li>
                            <li>jQuery</li>
                            <li>SQL</li>
                            <li>Ajax</li>
                            <li>HTML</li>
                            <li>CSS</li>
                        </ul>
                    </section>

                    <section id="ResumeKnowledge" class="ResumeContentText">

                        <ul>
                            <li>PHP </li>
                            <li>another item </li>
                            <li>another item </li>
                            <li>another item </li>
                            <li>another item </li>
                        </ul>
                    </section>
</section>
<section class="ResumeItem">
                    <header class="ResumeContentTitle" id="ResumeKnowledgeHeader">
                        <p>Professional Knowledge</p>
                    </header>
</section>

』

問題は、ul li が「スペース」を取らないことです。次のセクションでは、id="ResumeKnowledge" セクションのみを考慮します。

I tried:

.skills ul li{
    overflow: none;
}
4

3 に答える 3

0

問題は、セクションがフローティングであるため、DOMの外部にあることです。クリアを追加すると、問題が修正されます。

http://jsfiddle.net/jp4LH/7/

<div style="clear:both;"></div>セクションの後に追加しました

于 2012-09-25T19:18:16.243 に答える
0

sectionクラスのあるインナーskillsが浮いてアウターsectionが崩れてしまうことで起こります。修正の 1 つは、新しいブロック フォーマット コンテキストを作成することです。

overflow: hidden

外側のセクションへ。このように新しいブロック フォーマット コンテキストを作成すると、外側sectionにすべての内側の浮動要素が完全に含まれるようになります。

于 2012-09-25T19:23:08.243 に答える
0

問題は、DOM の外側にあるフローティング アイテムです。前の回答が正しいか、次を追加できます: section.ResumeItem{ clear:both; 2 つの列を横に並べたままにしたい場合。

于 2012-09-25T19:21:05.293 に答える