响应式 <li> 占用空间
Posted
技术标签:
【中文标题】响应式 <li> 占用空间【英文标题】：responsive <li> to occupy space 【发布时间】：2015-04-09 03:19:44 【问题描述】：我该怎么做，让.tabs__item2占据右边的剩余空间？
我希望无论屏幕尺寸如何，.tabs__item2 都会将剩余空间填充到其内部的蓝色大 div 的边缘。也许像width:100%。
我不希望 .tabs__item2 在调整页面大小时堆叠，而是在调整页面大小时缩小。
由于某种原因，它的作用就像.tabs__item2 右侧也有一堆填充一样。
有什么想法吗？
www.techagesite.com/delete3.htm
<div class="container-dock">
<!-- This example will switch at a 760px width breakpoint -->
<div class="tabs tabs--md">
<ul class="tabs__list list-unstyled">
<li class="tabs__item tabs__item--active">
<a href="#tab-1" class="tabs__link">
<img src="thumbs/rsz_1rsz_1desktop.png"></a> </li>
<li class="tabs__item">
<a href="#tab-3" class="tabs__link">
<img src="thumbs/rsz_1rsz_mobile.png"></a></li>
<li class="tabs__item">
<a href="#tab-2" class="tabs__link"><img src="thumbs/rsz_1rsz_fb.png"></a>
</li>
<li class="tabs__item">
<a href="#tab-4" class="tabs__link"><img src="thumbs/rsz_1rsz_1twitter.png"></a></li>
<li class="tabs__item2">
<img src="thumbs/rsz_1rsz_1twitter.png"></a></li>
</ul>
<div class="tabs__content">
<div id="tab-1" class="tabs__area tabs__area--active">
<div class="top_grow11">
<a href="http://www.techagesite.com/hd-wii-wallpapers-mario-kart-super-mario-galaxy-2.htm">
<img class="cats" src="thumbs/super-mario-galaxy-hd-desktop-background_small1.jpg">
</a>
</div>
<div class="top_grow11">
<a href="http://www.techagesite.com/free-music-wallpaper-big-music-wallpapers.htm">
<img class="cats" src="thumbs/neon-background-music-bars-wallpaper-1920x1200_small1.jpg">
</a>
</div>
<div class="top_grow11">
<a href="http://www.techagesite.com/awesome-minecraft-hd-desktop-wallpapers-1080p-backgrounds-1920x1080.htm">
<img class="cats" src="thumbs/awesome-minecraft-gaming-wallpaper-1920x1080-hd-creeper_small.png">
</a>
</div>
<div class="top_grow11">
<a href="scooby-doo-wallpapers-character-backgrounds-coloring-pages-the-gang.htm">
<img class="cats" src="thumbs/scooby-doo.jpg">
</a>
</div>
<div class="top_grow11">
<a href="free-hd-neon-colours-desktop-wallpapers-download.htm">
<img class="cats" src="thumbs/bright-abtsract-glow-hd-wallpaper-1920x1080-hd_small1.jpg">
</a>
</div>
<div class="top_grow11">
<a href="funny-wallpaper-pics-quotes-photos-and-stuff.htm">
<img class="cats" src="thumbs/funny-wallpaper-pics-quotes-photos-poo-1600x1200_small.jpg"></img>
</a></div></div>
<div id="tab-2" class="tabs__area">
<div class="top_grow11">
<a href="facebook-timeline-covers-photos-851x315.htm">
<img class="cats" src="thumbs/fb-cover_small.jpg"></img>
</a></div>
</div>
<div id="tab-3" class="tabs__area"><div class="top_grow11">
<a href="hd-minecraft-mobile-phone-wallpapers-1080x1920-steve-creeper.htm">
<img class="cats" src="thumbs/minecraft1.jpg"></a>
</div>
<div class="top_grow11">
<a href="hd-disney-frozen-wallpapers-for-mobile-phones-1080x1920.htm">
<img class="cats" src="thumbs/frozen1.jpg"></a>
</div>
<div class="top_grow11">
<a href="legend-of-zelda-ocarina-of-time-mobile-phone-wallpapers.htm">
<img class="cats" src="thumbs/zelda1.jpg"></a>
</div>
<div class="top_grow11">
<a href="hd-super-mario-bros-world-mobile-phone-wallpapers-1080x1920.htm">
<img class="cats" src="http://www.techagesite.com/thumbs/mario1.jpg"></a>
</div>
<div class="top_grow11">
<a href="lg-g2-g3-htc-one-max-s-m8-mobile-phone-wallpapers.htm">
<img class="cats" src="thumbs/lg1.jpg"></a>
</div>
<div class="top_grow11">
<a href="android-hd-mobile-phone-wallpapers-1080x1920.htm">
<img class="cats" src="thumbs/android1.jpg"></a>
</div></div><div id="tab-4" class="tabs__area">
<div class="top_grow11"><a href="twitter-headers-and-background-covers-1500x500.htm">
<img class="cats" src="http://placehold.it/350x150"></a>
</div></div>
<div id="tab-5" class="tabs__area">
</div>
<div id="tab-6" class="tabs__area">
</div></div>
</div>
</div></div>
@media (max-width: 990px)
.tabs--lg
border: 1px solid #0A3D5D;
.tabs--lg .tabs__content
border-width: 0;
border-top-width: 1px;
border-color: #0A3D5D;
.tabs--lg .tabs__list
background: #0A3D5D;
margin: 0;
margin-bottom: -1px;
display: inline-block;
width: 100%;
.tabs--lg .tabs__list .tabs__item
overflow: hidden;
position: absolute;
height: 0;
.tabs--lg .tabs__list .tabs__item--active
height: auto;
position: relative;
.tabs--lg .tabs__list--open .tabs__item
position: relative;
height: auto;
.tabs--lg .tabs__list--open .tabs__item--active > .tabs__link:after
content: none;
.tabs--lg .tabs__item
width: 100%;
max-width: 100%;
border-right: 0;
text-align: left;
.tabs--lg .tabs__item--active > .tabs__link
background-color: #0A3D5D;
color: white;
border: 0;
.tabs--lg .tabs__item--active > .tabs__link:hover
color: white;
.tabs--lg .tabs__item--active > .tabs__link:after
content: "";
width: 0;
height: 0;
border: .5em solid transparent;
border-top-color: #0A3D5D;
float: right;
margin-top: .75em;
@media (max-width: 1070px)
.tabs--xl
border: 1px solid #0A3D5D;
.tabs--xl .tabs__content
border-width: 0;
border-top-width: 1px;
border-color: #0A3D5D;
.tabs--xl .tabs__list
background-color: #0A3D5D;
margin: 0;
margin-bottom: -1px;
display: inline-block;
width: 100%;
.tabs--xl .tabs__list .tabs__item
overflow: hidden;
position: absolute;
height: 0;
.tabs--xl .tabs__list .tabs__item--active
height: auto;
position: relative;
.tabs--xl .tabs__list--open .tabs__item
position: relative;
height: auto;
.tabs--xl .tabs__list--open .tabs__item--active > .tabs__link:after
content: none;
.tabs--xl .tabs__item
width: 100%;
max-width: 100%;
border-right: 0;
text-align: left;
.tabs--xl .tabs__item--active > .tabs__link
background-color: #0A3D5D;
color: white;
border: 0;
.tabs--xl .tabs__item--active > .tabs__link:hover
color: white;
.tabs--xl .tabs__item--active > .tabs__link:after
content: "";
width: 0;
height: 0;
border: .5em solid transparent;
border-top-color: #0A3D5D;
float: right;
margin-top: .75em;
.tabs__list
margin: 0;
margin-bottom: -1px;
background: #0A3D5D;
.tabs__item
margin-bottom: 0;
display: inline-block;
width: auto;
vertical-align: top;
background: #0A3D5D;
.tabs__item--active > .tabs__link
border: 1px solid #0A3D5D;
background: #0A3D5D;
border-bottom: 0;
position: relative;
z-index: 3;
color: #333333;
.tabs__item--active > .tabs__link:hover
color: #262626;
.tabs__link
font-weight: 500;
color: #333333;
padding: .0em 0em;
line-height: 0;
display: block;
text-decoration: none;
background: #0A3D5D;
.tabs__link:hover
text-decoration: underline;
.tabs__area
opacity: 0;
visibility: hidden;
-webkit-transition: opacity .5s linear;
transition: opacity .5s linear;
height: 0;
background: #0A3D5D;
.tabs__area--active
opacity: 1;
visibility: visible;
-webkit-transition: opacity .5s linear;
transition: opacity .5s linear;
height: auto;
background: #0A3D5D;
.tabs__content
margin-bottom: 0;
background: #0A3D5D;
border: 0px solid #0A3D5D;
overflow: hidden;
position: relative;
clear: both;
padding: 0px;
padding: 0.0rem;
.border
border: 3px solid #006699;
border-bottom-right-radius:8px;
border-bottom-left-radius:8px;
border-top-right-radius:8px;
border-top-left-radius:8px;
.container-dock
padding: 0rem;
width: 100%;
max-width: 700px;
margin: auto;
background: #0A3D5D;
.list-unstyled
padding-left: 0;
list-style: none;
.cats
width: 100%;
height: auto;
.top_grow11
float: left;
margin-right: 0px;
width: auto;
height: 100%;
.tabs__item2
margin-bottom: 0;
display: inline-block;
width: auto;
vertical-align: top;
【问题讨论】：
请在这里也提供html和css - How to create a Minimal, Complete, and Verifiable example @Techagesite 请查看下面的答案并将最能解决您问题的答案标记为已接受。 【参考方案1】：看看这个使用 CSS Flex Box 布局的例子。
.flex
display: flex;
.block
width: 80px;
min-width: 80px; /* Make other boxes static */
height: 80px;
background-color: black;
margin: 10px;
.fill
flex: 1;
<div class="flex">
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
<div class="block fill"></div>
</div>【讨论】：
是否有可能做到只有块填充 div 会弯曲，其余的保持静态？ @Techagesite 添加min-width 就可以了。我刚刚在我的示例中添加了它，所以请查看 :)
我如何将它合并到这个 www.techagesite.com/delete3.htm 可以完成还是我在浪费我的时间？
@Techagesite 考虑用div 替换ul 和display: flex。您需要将flex: 1 属性赋予您的.tabs__item2。
不能用ul完成吗？我无法将它们更改为 div，因为我也需要 ul 类。【参考方案2】：
解决此问题的一种方法是应用以下样式：
ul
display: table;
width: 100%;
li
display: table-cell;
text-align: center;
使用此 CSS，您的导航链接将如下所示：
Source.
【讨论】：
谢谢，但我希望它们彼此齐平:) @Techagesite 抱歉，flush next to each other 是什么意思？
@Techagesite 如果您的意思是<li> 之间没有空格，那么只需在.tabs__list 之间执行text-align: center;。无需其他样式。
齐平，彼此相邻，中间没有空格。我需要这样做，以便 .tabs__item2 填充右侧的剩余空间。因此，您在第二个标题图像之间看到的空间延伸到蓝色 div 的末尾。那里的空间量取决于屏幕大小，我需要 .tabs__item2 来响应并根据空间量进行扩展和收缩。
@Techagesite 在这种情况下，请使用display: flex;。请参阅 Kagami Sascha Rosylight 的回答。【参考方案3】：
问题是，您的图像非常小。所以它们看起来会像素化。但是，如果你想要它无论如何这里是样式：-
.tabs__item
width: 20%;
.tabs_item>a>img
width:100%;
【讨论】：
以上是关于响应式 <li> 占用空间的主要内容，如果未能解决你的问题，请参考以下文章