我有一堆内联块，我想在浏览器窗口收缩时将其换行。它们看起来像这样：
[nav element 1] [nav element 2] [nav element 3] [nav element 4]
这是一个{h1}标题。
当浏览器调整大小时，我希望它们包装，他们这样做。但是他们会覆盖下一行的标题：
[nav element 1] [nav element 2] [nav element 3]
[nav element 4] eader。
我尝试将标题与段落和换行符分开。不。
我试过把一个＆＃34;明确：两个＆＃34;在{h1}风格。不。
我已经尝试在{h1}周围添加一个{div}和一个＆＃34; display：block＆＃34;和/或＆＃34;明确：两者＆＃34;。不。
我希望页面内容在导航栏包装时向下移动。
任何提示？
我的代码及其结果可以在criv.com/test上看到
修改
@Configuration
@EnableWebSecurity
public class SecurityConfig extends WebSecurityConfigurerAdapter {
@Autowired
@Qualifier("authenticationProvider")
AuthenticationProvider authenticationProvider;
@Autowired
DataSource dataSource;
@Autowired
public void configAuthentication(AuthenticationManagerBuilder auth)
throws Exception {
auth.jdbcAuthentication()
.dataSource(dataSource)
.passwordEncoder(passwordEncoder())
.usersByUsernameQuery(
"select username,password, enabled from users where username=?")
.authoritiesByUsernameQuery(
"select username, role from user_roles where username=?");
}
@Bean
public PasswordEncoder passwordEncoder() {
PasswordEncoder encoder = new BCryptPasswordEncoder();
return encoder;
}
@Override
protected void configure(HttpSecurity http) throws Exception {
http.headers().cacheControl().and().xssProtection().and()
.frameOptions().and();
http.authorizeRequests()
.antMatchers("/sadmin/**")
.access("hasRole('ROLE_SADMIN')")
.antMatchers("/admin/**")
.access("hasRole('ROLE_ADMIN') or hasRole('ROLE_SADMIN')")
.antMatchers("/")
.access("hasRole('ROLE_ADMIN') or hasRole('ROLE_SADMIN') or hasRole('ROLE_USER')")
.and().formLogin()
.loginProcessingUrl("/j_spring_security_check")
.loginPage("/login").failureUrl("/login?error")
.usernameParameter("username").passwordParameter("password")
.and().logout().logoutUrl("/j_spring_security_logout")
.logoutSuccessUrl("/login?logout").and().exceptionHandling()
.accessDeniedPage("/403").and().csrf();
// session management URL for reference
// https://github.com/spring-projects/spring-security-javaconfig/blob/master/spring-security-javaconfig/src/test/groovy/org/springframework/security/config/annotation/web/configurers/NamespaceSessionManagementTests.groovy
}
public class MyUserDetails extends User {
private int id;
public MyUserDetails(String username, String password, boolean enabled,
boolean accountNonExpired, boolean credentialsNonExpired,
boolean accountNonLocked,
Collection<? extends GrantedAuthority> authorities) {
super(username, password, enabled, accountNonExpired,
credentialsNonExpired, accountNonLocked, authorities);
}
// getter setter ....
}
答案 0 :(得分：1)
从中删除绝对位置。如果您希望导航将1px推到顶部，则可以使用margin-top:-1px
这是工作代码。
body {
margin-left: auto;
margin-right: auto;
width: 80%;
background-color: #FFFFFF;
}
h1 {
display:inline-block;
background:#FF0000;
border:2px solid black;
clear:both;
}
.nav {
display: block;
float: left;
overflow: auto;
}
.nav a {
display:inline-block;
width:88px;
height:50px;
font-family:"Comic Sans MS", Arial, Sans-serif;
color:#FFFFFF;
background-color:#008000;
text-align:center;
padding:0px;
margin:0px;
border-style:solid;
border-color:#FFFFFF;
border-width:1px;
text-decoration:none;
}
.nav a:visited {
color:#CCCCCC;
}
.nav a:hover, a:active {
color:#008000;
background-color:#CCCCCC;
}
.nav a#here {
color:#008000;
background-color:white;
}
ul.subnav {
background-color:#009000;
padding:0px;
margin:0px;
border:1px solid #009000;
width:618px;
height:18px;
position:absolute;
top:72px;
left:220px;
}
ul.subnav li {
display:block;
width:123px;
height:18px;
background-color:#009000;
list-style-type:none;
margin:0px;
padding:0px;
border-width:0px;
overflow:hidden;
float:left;
}
ul.subnav a {
display:block;
width:123px;
height:18px;
font-family:"Comic Sans MS", Arial, Sans-serif;
font-size:75%;
font-weight:bold;
color:#FFFFFF;
background-color:#009000;
text-align:center;
padding:0px;
border-width:0px;
margin:0px;
text-decoration:none;
}
ul.subnav a:visited {
color:#CCCCCC;
}
ul.subnav a:hover, a:active {
color:#008000;
background-color:#CCCCCC;
}
ul.subnav a#here {
color:#008000;
background-color:white;
}
.note {
background-color:#7A991A;
}
.text {
background-color:white;
font-family:"Comic Sans MS", Arial, Sans-serif;
color:#008000;
width:80%;
left:10%;
}
.text a:link {
color:#008000;
}
.text a:visited {
color:#999999;
}<div class="nav">
<a href="list.html">2014 peony list</a>
<a href="bloom.html">bloom calendar</a>
<a href="gallery.html">photo gallery</a>
<a href="howto.html">peony<br />how-to's</a>
<a href="tales.html">peony<br />tales</a>
<a href="visit.html"> <br />visit</a>
<span class="clearfix"><a href="contact.html">contact/ order</a></span>
</div>
<br />
<div class="notreally"><h1>peonies of the coos riviera</h1></div>
<span class="text">
Just above the Connecticut River in New Hampshire's Coos County,
more than a hundred varieties of herbaceous peonies, tree peonies,
and intersectional-hybrid peonies bloom from late May to early July.
<p>The display garden has closed for the season. To order peonies for fall planting,
email <a href="mailto:peonies@criv.com">peonies@criv.com</a>, or phone 603.837.9800.</p>
<p>Review <a href="now.html"><b>the 2014 bloom season</b></a> in pictures!</p>
</span>