个人中心
文章发布
退出
作者热门文章
- Java 双重比较
- java - 比较器与 Apache BeanComparator
- Objective-C 完成 block 导致额外的方法调用？
- database - RESTful URI 是否应该公开数据库主键？
27
4
我有一个用 html5 编写的代码，其中有一个 Logo 和一些导航链接。还有带有两个文本字段和 3 个按钮的登录表单。我想以这样一种方式设置样式，即我的 Logo 和导航栏链接并排 float 到左侧，而我的登录表单和按钮在右侧。我想要下图所示的确切样式
HTML代码是:
<body>
<header>
<nav class="nav-header-main">
<a class="header-logo" href="index.php">
<img src="img/logo.png" alt="mmtuts logo">
</a>
<ul>
<li><a href="index.php">Home</a></li>
<li><a href="#">About Me</a></li>
<li><a href="#">Portfolio</a></li>
<li><a href="#">Contact</a></li>
</ul>
<div class="header-login">
<form action="includes/login.inc.php" method="post">
<input type="text" name="mailuid" placeholder="Username/E-mail...">
<input type="password" name="pwd" placeholder="Password...">
<button type="submit" name="login-submit">Login</button>
</form>
<a href="signup.php">Signup</a>
<form action="includes/logout.inc.php" method="post">
<button type="submit" name="logout-submit">Logout</button>
</form>
</div>
</nav>
</header>
CSS 文件:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background-color: #d3d3d3;
height: 100vh;
width: 100%;
}
header {
position: fixed;
top: 0;
left: 0;
right: 0;
display: inline;
background-color: #fff;
}
.header-logo img {
height: 40px;
margin-top: 10px;
}
最佳答案
检查这个 fiddle https://jsfiddle.net/nak73406/frpu62Lq/3/您可以使用 float 来改变元素的方向。注意 CSS 中的最后几行
或者使用这段代码
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background-color: #d3d3d3;
height: 100vh;
width: 100%;
}
header {
position: fixed;
padding-top: 15px;
left: 0;
right: 0;
display: inline;
background-color: #fff;
}
nav ul{
list-style: none;
}
nav li a{
text-decoration: none;
color: gray;
text-transform: uppercase;
}
nav li{
float: left;
padding: 5px;
}
.header-logo img {
height: 40px;
margin-top: 10px;
float: left;
margin-right: 5px;
}
.logout {
float: right;
padding: 6px;
}
.loginform{
float: left;
}
.header-login{
float: right;
}
button[name="login-submit"],button[name="logout-submit"]{
background: black;
color: white;
border-radius: 5px;
padding: 5px;
border:none;
}
button[name="signup-submit"]{
background: white;
color: white;
border-radius: 5px;
padding: 5px;
border:none;
}
button[name="signup-submit"] a{
text-decoration: none;
}
input{
border-radius: 5px;
padding: 10px !important;
}<body>
<header>
<nav class="nav-header-main">
<a class="header-logo" href="index.php">
<img src="img/logo.png" alt="mmtuts logo">
</a>
<ul>
<li><a href="index.php">Home</a></li>
<li><a href="#">About Me</a></li>
<li><a href="#">Portfolio</a></li>
<li><a href="#">Contact</a></li>
</ul>
<div class="header-login">
<form class="loginform" action="includes/login.inc.php" method="post">
<input type="text" name="mailuid" placeholder="Username/E-mail...">
<input type="password" name="pwd" placeholder="Password...">
<button type="submit" name="login-submit">Login</button>
<button type="submit" name="login-submit"><a href="signup.php">Signup</a></button>
</form>
<form class="logout" action="includes/logout.inc.php" method="post">
<button type="submit" name="logout-submit">Logout</button>
</form>
</div>
</nav>
</header>
</body>关于html - 如何使用左侧的 Logo 和菜单链接以及右侧的表单控件来设置内联导航栏的样式，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/55311794/
27
4
0
似乎这是不可能的，但如果有人提示如何在谷歌浏览器中创建右侧边栏(如 iframe)，任何提示都会有所帮助。谢谢。 最佳答案 如果你的意思是这样的 这是来自 google chrome 实验 api:
您好，我在用 C 语言解决编程任务时遇到问题。 The funktion "Trim" should replace all spaces at the end of a String with nu
有什么方法可以找到一个事件(或属性或方法或类似的东西)来检测窗口停靠到左侧或右侧吗？ 描述: 通过 WindowState 属性，您可以了解当您的窗口在正常/最小化/最大化这三种状态之间改变状态时。在
我目前需要找到一个算法来确定一个点是在圆弧的右侧还是左侧。 这是以下算法的扩展以包含弧: // isLeft(): tests if a point is Left|On|Right of an i
我正在使用 Selenium 执行测试，该测试在 3 个浏览器上并行执行。我想以下一种方式定位 window :左侧，右侧和底部，所以基本上我正在寻找与 (start btn+left btn...)
如果我有下面的代码，并且我想插入一个带有 jquery 的 div 作为表单标记内的第一个元素，那么最好的方法是什么？ //i want to insert a div here with
有没有比这个更好的方法来解决这个问题？ def 渲染(arr): single_elements = [] double_elements = [] for i in xrange(len(arr
Home About
我遇到的问题是: www.dondolomemories.it 当调整窗口大小时， Logo 图像直到最后一刻才调整大小，导致可怕的两行菜单溢出。 我花了将近 2 个小时尝试大量不同的设置。有人可以帮
我希望我能很好地解释这一点。我有一个 style="float: right;"的 div在这个 div 中，我有一个包含一些编辑器字段的表。但现在我想要两个文本编辑器框(在 .NET MVC3 @H
如果有人能帮助我解决这个问题，我将不胜感激，因为我无法让它工作。 这是我正在努力处理的代码:http://jsfiddle.net/sp91c3nk/ 基本上，我希望右侧导航栏与灰色主要内容区域处于同
我正在尝试在图像的所有四个边上添加文本，但我无法让正确的文本正确对齐。右边的文字仍然在左边。 fiddle :https://jsfiddle.net/y75L0ww9/ Text on top Te
我正在尝试为顶部以及左侧和右侧设置 css 阴影，但高度降低。我熟悉模糊/半径，但我希望阴影非常短。 picture from wix template (还不能上传，抱歉) 有人可以帮帮我吗？我看到
关闭。这个问题需要details or clarity .它目前不接受答案。 想改进这个问题吗？ 通过 editing this post 添加细节并澄清问题. 关闭 6 年前。 Improve
请看这个jsfiddle . 我想要 与 innerText “嗨!”始终出现在其包含父级的可见部分的底部/右侧。它不应与其父级的内容一起滚动。 HTML: Header
我有一个输入框和一个提交按钮。 当我向右浮动提交按钮时，我希望它在与输入字段相同的点结束 - 这是我的意思的一个例子:http://prntscr.com/aggln5 目前，输入和提交在不同的点结束
我基本上刚刚开始让我的网站响应，但出于某种原因，语言 div (#lang) 设置为向右浮动，正在向右浮动，但在它的右侧有一个小边距。虽然没有填充设置父 div #container，但我无法理解。
我目前正在创建一个网站，该网站有一个带有文本等内容的居中框。现在，我还想要一个漂浮在右边的盒子，与我的主盒子有一点缝隙。留个图吧，我画的红框就是我要制作的 float 框。 顺便说一句。蓝色方框只是我
我不是 UI 开发人员，但这次需要玩 css。为用户配置文件编写表单。我快完成了，但还有一个小问题。问题 个人资料图片未正确显示在右侧。 因此，第一个字段(组织名称)显示不正确 自从过去两个小时以来，
我有以下脚本: http://jsfiddle.net/rYFEY/12/ 效果很好，除了我需要移除右侧和右下角的 handle ，只留下底部 handle 用于调整大小。目前，如果我点击右 hand
我是一名优秀的程序员,十分优秀！