个人中心
文章发布
退出
作者热门文章
- Java 双重比较
- java - 比较器与 Apache BeanComparator
- Objective-C 完成 block 导致额外的方法调用？
- database - RESTful URI 是否应该公开数据库主键？
25
4
我正在尝试创建一个类似于 Stack Overflow 的导航菜单(问题、标签、用户、徽章、未回答、提问)。
我尝试通过使用 Logo 和 5 个菜单选项来做到这一点。这些被放置在容器的顶部。我无法对齐它们。
我怎样才能创建它以使它们对齐？
HTML:
<body>
<div id="logoimg">
<a href="http://www.domain.com">
<img src="http://www.domain.com/domain.png" border="0"></img>
</a>
</div>
<div id="navi">
<a href="http://www.domain.com/home.php">Home</a>
<a href="http://www.domain.com/profile.php">Profile</a>
<a href="http://www.domain.com/settings.php">Settings</a>
<a href="http://www.domain.com/logout.php">Logout</a>
</div>
<div id="my">
<div id="box">
<div id="pic">
<div id="myname">
<?php echo "$angelinajolie";?>
</div>
</div>
</div>
</body>
CSS:
div#logimg {
margin-left: 213px;
}
#box {
background-color: #FFFFFF;
margin:0 auto;
height: 300px;
width:830px;
border:1px solid #E2E2E2;
}
最佳答案
试一试:
HTML:
<div id="header">
<h1><a href="http://www.domain.com">Name of Site</a></h1>
<ul class="nav">
<li><a href="http://www.domain.com/home.php">Home</a></li>
<li><a href="http://www.domain.com/profile.php">Profile</a></li>
<li><a href="http://www.domain.com/settings.php">Settings</a></li>
<li><a href="http://www.domain.com/logout.php">Logout</a></li>
</ul>
<ul class="nav extra">
<li><a href="http://www.domain.com/logout.php">Ask a Question</a></li>
</ul>
</div>
将整个内容包装在一个容器 div 中。该站点的 Logo 可能应该是一个带有文本标题的 h1(以方便屏幕阅读器等)。链接列表应该是无序列表。该结构将很好地包含内容，CSS 可以完成剩下的工作。
CSS:
#header h1{
float: left;
width: 100px;
height: 50px;
}
float 站点标题/ Logo 并为其指定宽度和高度。
#header h1 a{
background-image: url(http://www.domain.com/domain.png);
display: block;
text-indent: -9999px;
overflow: hidden;
width: 100px;
height: 50px;
}
将您的 Logo 作为背景图像放在 anchor 标记上，使 anchor 标记成为 block 级元素，使用 text-indent 属性隐藏文本并结合 hidden 的溢出(这将文本推向左侧) .
#header a{ text-decoration: none; }
#header .nav li{
background: #eee;
border:1px solid #E2E2E2;
float:left;
margin-right: 0.5em;
padding: 0.2em 0.5em;
}
在 ul 标签中 float 列表元素并给它们一些样式。
#header .extra{
float: right;
margin-right: 0;
top: 0;
right: 0;
}
将“额外”导航 float 到右侧而不是左侧。
在此处查看实际效果:http://jsfiddle.net/6F5ky/
关于html - 类似于 Stack Overflow 的顶部导航菜单的 CSS，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/4567177/
25
4
0
我正在使用 bootstraptable 并试图让单元格显示溢出的内容但只显示向下(即 overflow-y)。问题是，bootstraptable css 使用 overflow: hidden o
来自文档:溢出: The overflow shorthand CSS property sets what to do when an element's content is too big to
有多个这样命名的问题，但我没有找到一个适用于我的情况，所以我在这里: 在这段代码中: #container:hover { overflow-x: hidden; } #container {
我正在学习 Haskell，但遇到了我没想到的异常“堆栈溢出”。 代码相当简单: type Reals = Double prod :: Reals -> Reals -> Reals prod a
我通读了this question并且没有看到我的问题是否有解决方案。 我创建了一个 CodePen这表明了这个问题。我希望隐藏红色边框左侧和右侧 (overflow-x) 的所有内容，但保持顶部和底
我有一张 bootstrap 4 卡，我想在其中隐藏字幕的溢出(并显示“...”)。我怎样才能实现这个目标？如果可能的话使用纯引导代码... Test object Added by
我今天更新了我的 flutter ，现在堆栈小部件中的溢出参数不再有效。 Flutter 1.22.0-10.0.pre.252 • channel master • https://github.c
使用 border-radius Opera 实际上不会隐藏元素的溢出部分。我已经尝试应用我设法在类似线程中找到的东西，例如定义边框样式或注意使用绝对和相对参数进行定位。但它仍然无法正常工作。 htm
我在固定大小的 div 中有一个表。如果表格溢出 div，我希望滚动条出现。我还想在向下滚动时克隆表格的标题，以便标题持久存在。我遇到的问题是我希望水平滚动条滚动克隆的标题和原始表格，而垂直滚动条
奇怪，我以为 overflow-x 和 overflow-y 都被广泛支持，但后来我才看到它只支持 CSS3( http://reference.sitepoint.com/css/overflow
unsigned long long terms; unsigned long long test; unsigned long long digit = 1; unsigned long long
我有一个案例，我必须使用 overflow-x:scroll; 水平显示内容。 现在在这个Fiddle第一个 block 有 overflow-y:scroll; 提供滚动，用户可以滚动内容。在第二个
您好，我正在尝试只使用 overflow-x 而不是 overflow-y 结构是这样的 Head1 feild1
我有一个正在运行的计划作业，我想计算过去 30 天的时间。为此，我收到一条警告，表示在表达式中检测到数字溢出。我怎样才能安全地给予 30 天？ @Override @Scheduled(cro
我有一个父级，它有多个子级，当父级宽度溢出时，我喜欢显示水平滚动条。 我不想使用“display:inline-block”属性，因为它们之间会产生空白。 这是我的尝试: .parent{ wid
我正在为导航栏编写一些 CSS，我需要为下拉菜单使用 max-height 和 overflow-y: scroll 以便确保它适合页面。但是，每当我将 overflow-y 属性设置为滚动时，它似乎
这是我的问题。我有一个旋转木马，它也像菜单一样。当选项卡的数量高于浏览器可用的宽度空间时，将出现轮播控件。一切正常。但我还在每个选项卡上添加了一个下拉菜单，这就是问题所在。如果我设置 overflow
这个问题在这里已经有了答案: CSS overflow-x: visible; and overflow-y: hidden; causing scrollbar issue (10 个答案) 关
这个问题在这里已经有了答案: How do you keep parents of floated elements from collapsing? [duplicate] (15 个答案) W
这是一个代码片段: div.one { width: 98%; border: 5px solid black; overflow-x: visible; overflow-y: hi
我是一名优秀的程序员,十分优秀！