8

ブロック要素から抜け出す順序付けられていないリストの箇条書きに問題があります。これは正常ですか、それとも箇条書きはドキュメント フローの一部とは見なされませんか?

このフィドルでは、順序付けられていないリストがpadding-left:0あり、弾丸がコンテナから押し出されていることがわかります。http://jsfiddle.net/E4WWu/1/

ここに見られるように、問題を「修正」するために、順序付けられていないリストにパディングを与える必要がありました: http://jsfiddle.net/E4WWu/

私の質問はこれです: なぜ箇条書きが<ul>要素内に含まれていないのですか? それは私のページに固有のものですか、それとも HTML/CSS に欠けているものですか?

前もって感謝します。

HTML

<div class="center-midright-container">
    <div class="infoBox"><span class="filler">Content Goes Here ...</span></div>
    <div class="innerBottom">
        <h3 class="instructHeader">Instructions<br/></h3>
        <ul class="instructText">
            <li>This is a list of instructions and this sentence is meant to be an item of the list. Each item can wrap around to the next line if it is long enough.</li>
            <li>This is a list of instructions and this sentence is meant to be an item of the list. Each item can wrap around to the next line if it is long enough.</li>
            <li>This is a list of instructions and this sentence is meant to be an item of the list. Each item can wrap around to the next line if it is long enough.</li>
        </ul>
    </div>
</div>

CSS

h3 {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}
h3 {
    color:#fff;
}
ul {
    list-style-image:url('http://oi43.tinypic.com/wb8nz9.jpg');
    padding-left:10px
}
h3.instructHeader {
    text-decoration:underline;
    text-align:center;
}
.center-midright-container {
    margin:0 auto;
    width: 700px;
}
.innerBottom {
    width:80%;
    border: 3px #b51700 ridge;
    background-color:#000;
    padding:10px;
    margin:0 auto;
    margin-top:25px;
}
.instructText {
    text-align:left;
    line-height:1.5;
    color:#fff;
}
/* This is actually filled with content in my page.  Here now just for a filler */
.infoBox {
    height:500px;
    background-color:#000;
    text-align:center;
    position:relative;
}
.filler {
    position:relative;
    top:47%;
    color:#fff;
}
4

2 に答える 2

17

コメントで質問に答えました。@Chad と @Mr Lister の助けに感謝します。

<ul>箇条書きがデフォルトでブロックの外側に含まれ、代わりに要素のパディングに含まれているという点で、要素のデフォルトのプロパティに気づきませんでした。考えてみると、これは各箇条書きのテキストを正確に並べることができるため、理にかなっています。

追加するlist-style-position: inside;と、パディングではなく要素の内側に配置することで修正されました。

ありがとう！

于 2013-09-25T13:54:08.903 に答える