gpt4 book ai didi

jquery - 保留最小宽度的边距

转载 作者:行者123 更新时间:2023-11-28 03:10:16 25 4
gpt4 key购买 nike

我有一个页眉包含标题和菜单。标题有边距,最小宽度等于菜单的宽度。当用户调整窗口大小时,右侧的边距会在达到最小宽度时消失。我想要的是将边距包含在页眉的最小尺寸中。有人有什么想法吗?

HTML:

    <!DOCTYPE HTML>
<html>
<body>
<div id="header">
<ul id="title">
<li>
Title
</li>
</ul>
<ul id="menu">
<li>Home</li>
<li>Profile</li>
<li>Projects</li>
<li>News</li>
<li>Contact</li>
<li class="stretch"></li>
</ul>
</div>
</body>
</html>

CSS:

    html, body {
margin: 0;
border: 0;
padding: 0;
width: 100%;
height: 100%;
font-family: Sans-Serif;
font-size: 1em;
}

ul {
list-style-type: none;
margin: 0;
padding: 0;
}

#header {
background-color: orange;
margin: 1em;
}

#title {
font-size: 2em;
font-weight: bold;
background-color: red;
display: inline-block;
}

#title li {
position: relative;
}

#menu {
width: 40em;
background-color: blue;
text-align: justify;
}

#menu li {
display: inline;
}

#menu .stretch {
display: inline-block;
width: 100%;
}

JS:

    $(function() {
//SET MINIMUM WINDOW WIDTH TO MENU WIDTH
var menu = $('#menu'),
header = $('#header');

header.css('min-width', menu.width());

$(window).resize(function() {
});
});

JSfiddle:

http://jsfiddle.net/L3u7nLgz/

最佳答案

我将您的 .menu 类更改为:

#menu {
/*width: 40em;*/
margin-right: 1em;
background-color: blue;
text-align: justify;
}

我认为您不想在此处指定宽度,向您的 block 级 ul 元素添加边距将满足您对边距的需求。

http://jsfiddle.net/L3u7nLgz/1/

编辑:您可以只在 .header 上使用填充。

#header {
background-color: orange;
margin: 1em;
padding-right: 1em;
}

http://jsfiddle.net/L3u7nLgz/2/

关于jquery - 保留最小宽度的边距,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30874358/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com