将填充应用于无序列表内的锚点仅适用于锚点

时间：2015-06-28 20:26:26

标签： html css

我有一个简单的导航栏，我希望移动设备风格，这意味着使链接尽可能大。

我认为我只是将嵌套应用到嵌套在<li>标签内的锚点，但填充只会在我悬停锚点时出现。我知道如何让它始终显示，并相应地扩展周围的元素（<li>，<ul>，<div>）。

＆＃13;
＆＃13; 
/********************************
 IMPORTS (breakpoints, colors...)
********************************/

/********************************
BREAKPOINT MIXINS
********************************/

/********************************
COLORS
********************************/

/********************************
GENERAL
********************************/

html {
  font-family: 'Lato', sans-serif;
}
@media (min-width: 992px) {
  html {
    margin: 0 5%;
  }
}
/********************************
BANNER
********************************/

#banner {
  margin: 1em 0;
  height: 100px;
  width: 100%;
  background-repeat: no-repeat;
  background-position: center;
  background-image: url("../img/banner/420.png");
}
@media (min-width: 767px) {
  #banner {
    background-image: url("../img/banner/767.png");
  }
}
@media (min-width: 992px) {
  #banner {
    background-image: url("../img/banner/992.png");
  }
}
@media (min-width: 1200px) {
  #banner {
    background-image: url("../img/banner/1200.png");
  }
}
/********************************
NAVBAR
********************************/

#navbar {
  background-color: #913D88;
  text-align: center;
}
@media (min-width: 992px) {
  #navbar {
    border-radius: 1em;
  }
}
#navbar ul {
  list-style: none;
  position: relative;
}
#navbar ul li {
  font-size: 1.1em;
  font-weight: 400;
  display: inline-block;
  width: 19%;
  /* TODO FIGURE OUT DROPDOWNS

			&:hover > ul {
				display: block;
			}
			ul {
				display: none;
				position: absolute; top: 100%;
				background-color: $primary-color;
				padding: 1em;
				text-align: center;
				li {
					font-size: 1.1em;
					font-weight: 400;
					display: block;
				}
			}

			*/
}
@media (min-width: 767px) {
  #navbar ul li {
    font-size: 1.2em;
  }
}
@media (min-width: 992px) {
  #navbar ul li {
    font-size: 1.3em;
  }
}
#navbar ul li a {
  padding: 1em;
}
#navbar ul li a:visited,
#navbar ul li a:link {
  color: #fff;
  text-decoration: none;
}
#navbar ul li a:hover {
  color: #491f45;
  background-color: #c371ba;
}
＆＃13; 
<!doctype html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1">

		<title>ZIC Knjižnica</title>

		<link href='http://fonts.googleapis.com/css?family=Lato:400,700,900&amp;subset=latin-ext,latin' rel='stylesheet' type='text/css'>

		<link rel="stylesheet" href="styles/style.css">
	</head>

	<body>
		<div id="banner"></div>

		<div id="navbar">
			<ul>
				<li><a href="#">IJS</a></li>
				<li><a href="#">knjižnica</a></li>
				<li><a href="#">zaloga</a>
				<!--<ul>
						<li><a href="#">novi izvodi tiskanih revij</a></li>
						<li><a href="#">elektronske revije</a></li>
						<li><a href="#">katalog</a></li>
						<li><a href="#">baze podatkov</a></li>
					</ul>-->					
				</li>
				<li><a href="#">storitve</a>
				<!--<ul>
						<li><a href="#">medknjižnična izposoja</a></li>
						<li><a href="#">fotokopirnica</a></li>
					</ul>-->
				</li>
				<li><a href="#">ENG</a></li>
			</ul>
		</div>
	</body>

</html>
＆＃13;
＆＃13;
＆＃13;

对于html的奇怪格式感到抱歉，不知道那里发生了什么。试图用整洁的功能来解决它​​，没有任何反应。另外我的css是从sass生成的，我想发布css以使代码段工作。

感谢您的帮助

1 个答案:

答案 0 :(得分：1)

我不确定你想要达到什么目的，但如果它只是一直看到填充：

＆＃13;
＆＃13; 
package com.myspring.controllers;

import javax.faces.bean.ManagedBean;
import javax.faces.bean.ManagedProperty;
import javax.faces.bean.SessionScoped;

import org.springframework.security.authentication.AuthenticationManager;
import org.springframework.security.authentication.UsernamePasswordAuthenticationToken;
import org.springframework.security.core.Authentication;
import org.springframework.security.core.AuthenticationException;
import org.springframework.security.core.context.SecurityContextHolder;


@ManagedBean
@SessionScoped
public class LoginController {


    private String userName;

    private String password;


    @ManagedProperty(value="#{authenticationManager}")
    private AuthenticationManager authenticationManager = null;

    public String login() {
        try {
            Authentication request = new UsernamePasswordAuthenticationToken(this.getUserName(), this.getPassword());
            Authentication result = authenticationManager.authenticate(request);
            SecurityContextHolder.getContext().setAuthentication(result);
        } catch (AuthenticationException e) {
            e.printStackTrace();
            return "failed";
        }
        return "success";
    }

    public String logout(){
        SecurityContextHolder.clearContext();
        return "loggedout";
    }

    public AuthenticationManager getAuthenticationManager() {
        return authenticationManager;
    }

    public void setAuthenticationManager(AuthenticationManager authenticationManager) {
        this.authenticationManager = authenticationManager;
    }

    public String cancel()
    {
        return "";
    }

    public String getUserName() {
        return userName;
    }


    public void setUserName(String userName) {
        this.userName = userName;
    }


    public String getPassword() {
        return password;
    }

    public void setPassword(String password) {
        this.password = password;
    }


}
＆＃13; 
/********************************
 IMPORTS (breakpoints, colors...)
********************************/

/********************************
BREAKPOINT MIXINS
********************************/

/********************************
COLORS
********************************/

/********************************
GENERAL
********************************/

html {
  font-family: 'Lato', sans-serif;
}
@media (min-width: 992px) {
  html {
    margin: 0 5%;
  }
}
/********************************
BANNER
********************************/

#banner {
  margin: 1em 0;
  height: 100px;
  width: 100%;
  background-repeat: no-repeat;
  background-position: center;
  background-image: url("../img/banner/420.png");
}
@media (min-width: 767px) {
  #banner {
    background-image: url("../img/banner/767.png");
  }
}
@media (min-width: 992px) {
  #banner {
    background-image: url("../img/banner/992.png");
  }
}
@media (min-width: 1200px) {
  #banner {
    background-image: url("../img/banner/1200.png");
  }
}
/********************************
NAVBAR
********************************/

#navbar {
  background-color: #913D88;
  text-align: center;
}
@media (min-width: 992px) {
  #navbar {
    border-radius: 1em;
  }
}
#navbar ul {
  list-style: none;
  position: relative;
}
#navbar ul li {
  font-size: 1.1em;
  font-weight: 400;
  display: inline-block;
  width: 19%;
  /* TODO FIGURE OUT DROPDOWNS

			&:hover > ul {
				display: block;
			}
			ul {
				display: none;
				position: absolute; top: 100%;
				background-color: $primary-color;
				padding: 1em;
				text-align: center;
				li {
					font-size: 1.1em;
					font-weight: 400;
					display: block;
				}
			}

			*/
}
@media (min-width: 767px) {
  #navbar ul li {
    font-size: 1.2em;
  }
}
@media (min-width: 992px) {
  #navbar ul li {
    font-size: 1.3em;
  }
}
#navbar ul li a {
  padding: 1em;
  background-color: #913D88;
}
#navbar ul li a:visited,
#navbar ul li a:link {
  color: #fff;
  text-decoration: none;
}
#navbar ul li a:hover {
  color: #491f45;
  background-color: #c371ba;
}
＆＃13;
＆＃13;
＆＃13;

之前您没有看到它的原因是没有为<!doctype html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>ZIC Knjižnica</title> <link href='http://fonts.googleapis.com/css?family=Lato:400,700,900&amp;subset=latin-ext,latin' rel='stylesheet' type='text/css'> <link rel="stylesheet" href="styles/style.css"> </head> <body> <div id="banner"></div> <div id="navbar"> <ul> <li><a href="#">IJS</a></li> <li><a href="#">knjižnica</a></li> <li><a href="#">zaloga</a> <!--<ul> <li><a href="#">novi izvodi tiskanih revij</a></li> <li><a href="#">elektronske revije</a></li> <li><a href="#">katalog</a></li> <li><a href="#">baze podatkov</a></li> </ul>--> </li> <li><a href="#">storitve</a> <!--<ul> <li><a href="#">medknjižnična izposoja</a></li> <li><a href="#">fotokopirnica</a></li> </ul>--> </li> <li><a href="#">ENG</a></li> </ul> </div> </body> </html>元素设置背景。我只是在＆＃34;标准＆＃34;中添加了<a>设置。 background-color选择器。

相关问题
最新问题