html - Navigation bar extended clickable area -


i've been playing around html , css , i've got problem. how can make padding left-right have link property too?

<div class="baranavigatie">             <ul class="lista">                 <li><a href="default.html">bine ati venit!</a></li>                 <li><a href="cinesunt.html">cine sunt?</a></li>                 <li><a href="ceofer.html">ce ofer?</a></li>                 <li><a href="evenimente.html">evenimente</a></li>                 <li><a href="contact.html">contact</a></li>             </ul>         </div> 

^a part of html code^

li{     font-size:25px;     display:inline;     padding-left:40px;     padding-right:40px; } .baranavigatie{     height:33px;     background-color:blue;     text-align:center; } li a{     text-decoration:none;     color:white;     font-weight:bold;     font-family: 'avant garde', avantgarde, 'century gothic', centurygothic, applegothic, sans-serif; } li:hover{     background-color:#6a92ff; } 

^css^

sorry bad english also.

easy - apply padding-left , padding-right <a> element instead of <li>. the <a> tag creates clickable link.

try this:

li {   font-size:25px;   display:inline; } .baranavigatie {   height:33px;   background-color:blue;   text-align:center; } li {   padding-left:40px;   padding-right:40px;   text-decoration:none;   color:white;   font-weight:bold;   font-family: 'avant garde', avantgarde, 'century gothic', centurygothic, applegothic, sans-serif; } li:hover {   background-color:#6a92ff; } 

Comments

Popular posts from this blog

c# - Validate object ID from GET to POST -

node.js - Custom Model Validator SailsJS -

php - Find a regex to take part of Email -