CODEWITHSUNDEEP
htmlindentation
JillAndMe
JillAndMe

Reputation: 4551

html,How to line it up clearly?

screenshot of wrapped lines with deviant indentation

I want to line it up clearly but I just can't. What should I do for it?

<html>
<head>
<style type="text/css">
    .article-topic-list a {
        color: black;
        text-decoration: none;
        margin-left: 15px; 
        margin-top: 20px;
    }`enter code here`
</style>
</head>
<body>
<div class="article-topic-list"> <a href="">Sale of Kodi TV boxes faces <br> legal test</a> </div>
<div class="article-topic-list"> <a href="">Piracy fighters battle Kodi 'epidemic'</a></div>
</body>
</html>

Upvotes: 2

Views: 31

Answers (2)

Frederik Spang
Frederik Spang

Reputation: 3454

To get the results you're asking for, designwise, you'll have to move the margin-styles to the div, and keep the color and text-decoration on your a-tag. If you simply remove the 'a' from the style tag, you won't get any color or text-decoration changes, since the style from the browser (directly on a), would take precedence.

.article-topic-list {
  margin-left: 15px; 
  margin-top: 20px;
}
.article-topic-list a {
  color: black;
  text-decoration: none;
 }
<body>
  <div class="article-topic-list">
    <a href="">Sale of Kodi TV boxes faces <br> legal test</a>
  </div>
  <div class="article-topic-list">
    <a href="">Piracy fighters battle Kodi 'epidemic'</a>
  </div>
</body>

See this example.

Upvotes: 2

Pedro Chiiip
Pedro Chiiip

Reputation: 188

Instead of applying the css rule to the tag, if you apply the rule to the entire div, i believe it should line up correctly. Your style script would be like this:

<style type="text/css">
.article-topic-list {
    color: black;
    text-decoration: none;
    margin-left: 15px; 
    margin-top: 20px;
}
</style>

And the output would be something like this.

Upvotes: 0

Related Questions