How to make a break inside <a> tag

user_15132317 0
Viewed 44

This is what i want to get

enter image description here

This is what i have

enter image description here

This is what happens after i use "<b.r>"

HERE IS HTML CODE

    <nav id="nav1">
        <ul>
            <li><a href="" class="red">NAGRODOWY MODEL GRY PZPN</a></li>
        </ul>
    </nav>

HERE IS CSS CODE

#nav1 ul
{
    display: block;
    margin-left: 32%;
    list-style: none;
}
#nav1 li a
{
    text-align: center;
    padding: 10px 9px 10px 9px;
    color: white;
    font-weight: bold;
    font-size: 11px;
}
#nav1 li .red
{
    background-color: #91191c;
}
css html
3 Answers

It is necessary to make tag a block. Add display: inline-block for selector #nav1 li a.

ul {
    display: block;
    margin-left: 32%;
    list-style: none;
}

li a {
    display: inline-block;
    text-align: center;
    padding: 10px 9px 10px 9px;
    color: white;
    font-weight: bold;
    font-size: 11px;
}

li .red {
    background-color: #91191c;
}
<ul>
    <li>
        <a href="" class="red">
            NAGRODOWY MODEL<br />
            GRY PZPN
        </a>
    </li>
</ul>

user_135734440

Try this:

#nav1 ul {
  display: block;
  margin-left: 32%;
  list-style: none;
}

#nav1 li a {
  text-align: center;
  padding: 10px 9px 10px 9px;
  color: white;
  font-weight: bold;
  font-size: 11px;
}

#nav1 li .red {
  background-color: #91191c;
}
<ul id="nav1">
  <li><a href="" class="red">NAGRODOWY MODEL GRY PZPN</a></li>
</ul>

user_142512210

Try giving your link tag display: inline-block;

#nav1 ul
{
    display: block;
    margin-left: 32%;
    list-style: none;
    max-width: 150px;
}
#nav1 li a
{
    text-align: center;
    padding: 10px 9px 10px 9px;
    color: white;
    font-weight: bold;
    font-size: 11px;
    display: inline-block;
}
#nav1 li .red
{
    background-color: #91191c;
}
<div id="nav1"><ul>
        <li><a href="" class="red">NAGRODOWY MODEL<br> GRY PZPN</a></li>
  </ul></div>

user_33013760
Related