在div horizontaly的众多跨度中的一个
Pet*_*tas 7 html javascript css
我有一个改变的CSS问题.最好用图像描述的一个.
确切的定义.我有一个内部有多个内联div的div.我想将一个类设置为其中一个(黄色一个)以使其居中并相应地将其余部分移动到一行中(div外部有溢出隐藏)如果我从右边的黄色制作第二个,它将会居中并且在那里将是左侧的三个,然后是它(居中),一个在右侧.我希望我说清楚.我知道它可以使用javascript完成但是一切都很流畅,以便稍后在重新调整整个页面大小时会引入一些问题.
帮助赞赏.
谢谢,彼得
（长；博士： http: //jsfiddle.net/feeela/3eq8dcLc/）
\n\n健康建议：使用 JavaScript 来完成此类任务，否则你可能会发疯。
\n\n话虽如此，我向您展示了一个流畅的纯 CSS 版本。
\n\n您需要了解的变量是：
\n\n- \n
- 列表中有多少项 \n
- 哪个项目应该突出显示 \n
两者都可以在 CSS 中解决。
\n\n\n\n
限制：
\n\n- \n
- 每个列表计数必须用 CSS 写下来；因此，如果您有一个滑块，其中可能包含三到一百个项目，则必须编写 CSS 98 次。 \n
- 不适用于内部包装器内的浮动项目（设置滑块的常用方式）\xe2\x80\x93 您无法翻译内部包装器，因为无法知道一个元素有多少个子元素有 \xe2\x80\x93 因此你不知道向左或向右平移多远。您只能直接处理单个项目（因为可以计算兄弟姐妹）。 \n
知道这一点后，您无法通过为目标项目（应突出显示的项目）设置类名来移动一行项目，但可以通过在父容器上使用类名来做到这一点。
\n\n\n\n
标记示例：
\n\n<div class="slider item-4">\n <ul>\n <li>Lorem ipsum dolor sit amet</li>\n <li>Consectetur adipisicing elit</li>\n <li>Alias aspernatur</li>\n <li>Assumenda atque aut consectetur</li>\n <li>Consequatur culpa dolore</li>\n </ul>\n</div>\n步骤1：
\n\n根据其同级项的数量将项目宽度设置为百分比。
\n\n有关其工作原理的说明，请参阅/sf/answers/853899301/和链接的资源。
\n\n/* two items */\n.slider > ul li:first-child:nth-last-child(2),\n.slider > ul li:first-child:nth-last-child(2) ~ li {\n width: 50%;\n}\n\n/* three items */\n.slider > ul li:first-child:nth-last-child(3),\n.slider > ul li:first-child:nth-last-child(3) ~ li {\n width: 33.3333%;\n}\n第2步：
\n\n根据突出显示项目的位置和同级计数，使用正（向右移动）或负（向左移动）边距移动第一个项目。这是棘手的部分。
\n\n/* Second item\n Notes:\n - The second item of three is already in the middle\n*/\n.slider.item-2 > ul li:first-child:nth-last-child(2) {\n margin-left: -25%;\n}\n.slider.item-2 > ul li:first-child:nth-last-child(4) {\n margin-left: 12.5%;\n}\n.slider.item-2 > ul li:first-child:nth-last-child(5) {\n margin-left: 20%;\n}\n.slider.item-2 > ul li:first-child:nth-last-child(6) {\n margin-left: 25%;\n}\n\n/* Third item\n Notes:\n - No third item in a list of two\n - The third item of five is already in the middle\n*/\n.slider.item-3 > ul li:first-child:nth-last-child(3) {\n margin-left: -33.3333%;\n}\n.slider.item-3 > ul li:first-child:nth-last-child(4) {\n margin-left: -12.5%;\n}\n.slider.item-3 > ul li:first-child:nth-last-child(6) {\n margin-left: 8.3333%;\n}\n\n/* \xe2\x80\xa6expand as required up to N items */\n\n\n
我准备了一个示例，可连续处理两到六个项目。如果您的滑块可能包含更多项目，则必须相应地扩展 CSS。
\n\n完整示例：
\n\n\n\n\r\n
\r\n\n
\r\n
\r\n<div class="slider item-4">\n <ul>\n <li>Lorem ipsum dolor sit amet</li>\n <li>Consectetur adipisicing elit</li>\n <li>Alias aspernatur</li>\n <li>Assumenda atque aut consectetur</li>\n <li>Consequatur culpa dolore</li>\n </ul>\n</div>\n/* two items */\n.slider > ul li:first-child:nth-last-child(2),\n.slider > ul li:first-child:nth-last-child(2) ~ li {\n width: 50%;\n}\n\n/* three items */\n.slider > ul li:first-child:nth-last-child(3),\n.slider > ul li:first-child:nth-last-child(3) ~ li {\n width: 33.3333%;\n}\n