0

I'm having a little trouble and I'm sure there's a simple fix for this seemly trvial question.

I have my HTML page setup with like the follow:

<ul class="locations">
   <li>
      Georgia
      <ul class="children">
         <li>
            Fulton County
            <ul class="children">
               <li>
                  Atlanta
               </li>
            </ul>
         </li>
      </ul>
   </li>
</ul>

I'm trying to style the "parents" list items one way, the "children" one way, and the "grandchildren" another way.

I've tried the following:

ul li{
    list-style: none;
    margin: 0;
}
ul.locations li+ul.children li{
    margin-left: 15px;
    clear: both;
}
ul.locationsli+ul.children li+ul.children li{
    float: left;
}

Where I want the "grandchildren" in this instance to float next to each other...regardless of how I work this our, clear:both; seems to be applied to both the "children" and "grandchildren" items. I also tried using > as a CSS selector with no luck.

Any ideas on fixing this? TIA

4

2 に答える 2

5

兄弟 (~または+) と直系の子孫 ( >) を混同しています。これを試して：

jsフィドル

ul li{
    list-style: none;
    margin: 0;
}
ul.locations > li > ul.children > li{
    margin-left: 15px;
    clear: both;
}
ul.locations > li > ul.children  > li > ul.children > li{
    float: left;
}
于 2013-04-02T23:45:19.763 に答える
1

あなたの例には兄弟がまったくありませんが、あなたが説明していることから、兄弟セレクターを使用したくありません(兄弟は階層内の同じレベルの要素です)。基本的に、すべての s を削除すると機能しますが、孫に+も必要です。clear: none

ul li{
    list-style: none;
    margin: 0;
}
ul.locations li ul.children li{
    margin-left: 15px;
    clear: both;
}
ul.locations li ul.children li ul.children li {
    float: left;
    clear: none;
}

http://jsfiddle.net/pT8LA/

于 2013-04-02T23:44:27.443 に答える