http://www.lundarienpress.com/ (这是一个wordpress网站)
这是我的网站,我正在尝试将一个搜索栏添加到导航菜单并将其放在右侧.有任何想法吗 ？
我还没有办法做到这一点.我希望论坛中有人可以帮助我.
我不知道，但我的段落在我的导航栏后面我是 html 和 css 新手下面是代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title> First App </title>
<link rel="stylesheet" href ="style.css">
</head>
<body>
<header>
<nav>
<ul>
<li class = "a"> <a href = "#"> Google </a></li>
<li class = "b"> <a href = "#"> Youtube </a></li>
<li> <a href = "#"> Facebook </a></li>
<li> <input type="text"> <button> Press Here </button></li>
</ul>
</nav>
</header>
<p>
Lorem, ipsum dolor sit amet consectetur adipisicin
g elit. Est tempora quasi ipsum commodi
. Atque ut officia …我无论如何都无法摆脱我的标题和导航栏菜单之间的差距.我已经尝试了每次调整填充/边距我可以想到要么推高它还是移动条形图,但它只是用菜单做了时髦的东西或推动其他内容.我需要一些帮助.
和代码
#header_wrap {
width:100%;
height:144px;
text-align: center;
}
#header {
width:980px;
margin:0 auto;
}
#preloadedImages
{
width: 0px;
height: 0px;
display: none;
background-image:url(Logo/logo14hover.gif);
}
.site_logo {
float:left;
width:302px;
height:144px;
background:url(Logo/logo14.gif) no-repeat;
}
.site_logo:hover {
float:left;
width:302px;
height:144px;
background:url(Logo/logo14hover.gif) no-repeat;
}
.headerpic {
float:left;
width:678px;
height:144px;
background:url(Images/headerpic.gif) no-repeat;
}
#menu_wrap {
position:relative;
z-index:2;
text-align:center;
width:100%;
padding: 0px 0px;
}
#menu {
position:relative;
z-index:2;
width:1000px;
text-align:center;
margin:0 auto;
height:61px;
padding: 0px 0px;
}
nav ul ul {
display: none;
}
nav …我试图集中导航.CSS text-align:center; 不管用.它似乎不会影响导航的任何方式,形状或形式.
这是我的HTML:
<nav id="user_nav"><ul>
<li><a href="#">Friends</a></li>
<li><a href="#">Followers</a></li>
<li><a href="#">Photos</a></li>
<li><a href="#">Interests</a></li>
</ul></nav>
这是我的CSS:
#user_nav {
height: 60px;
border-bottom: 1px solid black;
width: 100%;
}
#user_nav ul {
margin: 0 auto;
width: 100%;
}
#user_nav ul li {
list-style: none;
display: inline;
text-align: center;
}
#user_nav ul li a {
padding: 15px 25px 0 0;
font-size: 18px;
float: left;
}
请注意:我正在尝试使链接水平和垂直居中.
如果有更好的方法来做到这一点,而不是我现在这样做,我愿意接受建议.
请帮我.
我有这个问题.Bootstrap 3框架在屏幕宽度达到767px时将导航栏更改为可折叠版本(移动版).我想改变它,移动版本存在,直到991px.我见过类似的问题,但正确的答案对我来说无法使用.它说它可以在下载自定义版本的Bootstrap时设置,为可折叠导航栏设置所需的值.问题是,我将它与Drupal 7一起使用,自动提供Bootstrap版本形成这个url:netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.css.
所以我必须在我的自定义css文件中覆盖这个值,但我知道要改变什么 - 我相信有很多类要改变.顺便说一句,它可能很重要,我不使用LESS版本.
问候,大卫
即时通讯使用Twitter bootstrap为我的响应,我希望导航将成为一个按钮,当它在移动设备上观看时,小屏幕显示的按钮,但当我点击它时,它不会滑动显示我的锚点这里是我的代码
<header class="navbar navbar-static-top marginTop">
<div class=" col-md-6 ">
<button class="navbar-toggle" type="button" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<img src="http://localhost/wordpress/wp-content/uploads/2014/03/logo.png" alt="" />
</div>
<div class="col-md-6">
<nav class="collapse navbar-collapse marginTopInNavBar">
<ul class="nav navbar-nav parentUl text-center floatLeft" >
<li class="dropdown parentNavLi floatLeft">
<a href="#" class="parentNavA floatLeft" id="first">Compare Prices</a>
<img src="http://localhost/wordpress/wp-content/uploads/2014/03/shadowNav.png" alt="" />
</li>
<li class="dropdown parentNavLi floatLeft">
<a href="#" data-toggle="dropdown" class="dropdown-toggle parentNavA floatLeft">Buying Guides</a>
<img src="http://localhost/wordpress/wp-content/uploads/2014/03/shadowNav.png" alt="" />
<ul class="dropdown-menu childUl text-left floatLeft" id="menu1">
<li …我正在尝试创建一个菜单,在选中/取消选中复选框时切换.我创建了以下html结构:
<header>
<div>
<label for="navmenu"><span class="icon-menu"></span></label>
<input type="checkbox" id="navmenu">
<nav>
<ul>
<li></li>
<li></li>
<li></li>
</ul>
</nav>
</div>
</header>
该<span>元素包含来自图标字体的图标,通过css.
这是我写的css:
header {
position: fixed;
width: 100%;
text-align: center;
font-size: 1.25em;
letter-spacing: 1px;
line-height: 2em;
background: #299a97;
color: white; }
header h1 {
font-size: 1em;
font-weight: normal; }
header div {
width: 2em;
position: fixed;
top: 0;
left: 0; }
header div input[type=checkbox] {
position: absolute;
top: 1em;
left: 1em;
opacity: 0; }
nav {
width: 100%;
position: fixed; …我有一个导航栏，当用户将鼠标悬停在链接上时，它会为下划线设置动画。我正在尝试添加 css，以便活动导航栏具有永久下划线。
我的代码
<Navbar className="navbar-expand-sm navbar-toggleable-sm" light>
<Container id="ContainerGrnH">
<NavbarToggler onClick={this.toggleNavbar} className="mr-2" />
<Collapse className="d-sm-inline-flex flex-sm-row-reverse" isOpen={!this.state.collapsed} navbar>
<div class="topnav">
<ul className="navbar-nav flex-grow">
<NavItem>
<NavLink tag={Link} className="text-white" to="/home">HOME <div className="underline"></div></NavLink>
</NavItem>
<NavItem>
<NavLink tag={Link} className="text-white" to="/people-profiles">PEOPLE PROFILES<div className="underline"></div></NavLink>
</NavItem>
<NavItem>
<NavLink tag={Link} className="text-white" to="/Role-types">ROLE TYPES<div className="underline"></div></NavLink>
</NavItem>
<NavItem>
<NavLink tag={Link} className="text-white" to="/support">SUPPORT<div className="underline"></div></NavLink>
</NavItem>
<NavItem>
<NavLink tag={Link} className="text-white" id="contactushead" to="/contact-us">CONTACT US<div className="underline"></div></NavLink>
</NavItem>
</ul>
</div>
</Collapse>
</Container>
</Navbar>
.topnav ul a {
color: #ffffff;
text-decoration: none;
padding: 10px;
transition: color …我绝对是 HTML 和 CSS 的初学者，所以我认为这对你们中的一些人来说可能听起来很容易。
我一直在寻找一种方法来为导航栏添加一个简单的阴影，就像codecademy.com/上的那个添加到我预先存在的导航栏上。我在下面的 codepen 中包含了它的 HTML 和 CSS：
[https://www.codepen.io/CodingAddict/pen/QWbmBVQ][2]
我正在为 Business Central 创建一份报告，即采购订单报告。采购订单页面经过扩展，添加了 Blob 数据类型的工作描述。我已将 Blob 字段添加到我的报表扩展中，现在我将 Blob 转换为文本，就像在我的页面中看到的那样。示例：“这是测试工作描述”。我相信我必须使用 InStream，然后使用 Read。有人可以提供示例代码来帮助我将其作为文本添加到我的报告中吗？
nav ×10
css ×7
html ×4
navbar ×2
checkbox ×1
dynamics-al ×1
effects ×1
header ×1
html-lists ×1
margin ×1
navigation ×1
padding ×1
reactjs ×1
search ×1
text-align ×1
wordpress ×1