Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <!DOCTYPE html>
- <html>
- <head>
- <style>
- ul {
- display: table;
- width:100%;
- margin:0;
- padding:0;
- }
- li {
- display:table-cell;
- }
- a {
- display:block;
- width: auto;
- text-decoration: none;
- font-size:20px;
- text-align:center;
- color: white;
- background-color: #B71C52;
- padding: 0.2em 0.6em;
- }
- a:hover {
- background-color: fuchsia;
- }
- </style>
- <ul>
- <li><a href="#">Link one</a></li>
- <li><a href="#">Link two</a></li>
- <li><a href="#">Link three</a></li>
- <li><a href="#">Link four</a></li>
- </ul>
- </head>
- <body>
- <p>In the example above, we let the ul element and the a element float to the left.
- li elements will be displayed as inline elements (no line break before or after the element). This forces the list to be on one line.
- The ul element has a width of 100% and each hyperlink in the list has a width of 6em (6 times the size of the current font).
- We add some colors and borders to make it more fancy.
- </p>
- </body>
- </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement