marges CSS: aligner une liste contre une image flottante gauche

https://stackoverflow.com/questions/1934768

20-09-2019
|

Question

Ce qui suit est ma première coupe au codage un commentaire reddit-like en html + css. J'ai quelques questions sur css et la structure générale:

Comment puis-je obtenir le corps de commentaire ( « Le roi ôta son chapeau ... ») pour l'aligner sur la tête de commentaire ( « Nathan, affiché ... ») et la queue de commentaire ( "réponse permalien ... « )? J'ai essayé de faire la marge de fond un peu .comment gauche plus mais cela n'a pas résolu le problème.
Je sais que je suis un peu déclencheur heureux avec les étiquettes. Quels sont ceux qui sont redondants?
Y at-il une meilleure / plus serré façon d'obtenir la même structure?

Merci à tous, Nathan

ps j'utilisé l'information à portée de main ici pour empiler mes flèches de vote au-dessus de l'autre.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
  <head>
    <title>CSS sandbox: comments</title>

    <style type="text/css">

      .vote {
        width: 15px;        
        float: left;
        clear: left;      
      }
      .vote img {
        display: block;
        float: none;
        clear: both;
        width: 15px;
      }
      .userpic img {
        width: 60px;
      }
      .comment-contents li {
        list-style-type: none;
        margin-bottom: 10px;
      }
      .comment-left {
        float: left;
      }
      .head {
        margin-left:10px;
      }
      .tail-list li {
        display: inline;
      }
      img {
        border: 0;
      }
      a {
        text-decoration: none;
      }
    </style>
  </head>

  <body>
    <div class="comment">
       <span class="comment-left">
        <span class="vote">
          <a href="#"><img alt="^" title="vote up" src="http://www.reddit.com/static/aupgray.gif"></a>
          <a href="#"><img alt="v" title="vote down" src="http://www.reddit.com/static/adowngray.gif"></a>
        </span>
        <span class="userpic">
          <a href="#">
          <img src="http://www.gravatar.com/avatar/550deada0ac679dfc3c9103b674760af?s=128&d=identicon&r=PG" height="60" width="60">
          </a>
        </span>
       </span>

       <span class="comment-main">
        <ul class="comment-contents">
          <li class="head">
           <a href="#">Nathan</a>, posted 2 hours ago
           <a href="#" class="comment-collapse">[-]</a>
          </li>
          <li class="middle">
            <p>The king took off his hat and looked at it. Instantly an immense
            crowd gathered. The news spread like wildfire. From a dozen leading
            dailies,reporters and cameramen came rushing to the scene pellmell in
            highpowered monoplanes. Hundreds of reserves,responding without
            hesitation to a riotcall,displayed with amazing promptness quite
            unparalleled inability to control the everincreasing multitude,but
            not before any number of unavoidable accidents had informally
            occurred.</p>

            <p>Chapter 1 - untitled (eecummings)</p>
          </li>
          <li class="tail">
           <ul class="tail-list">
            <li><a href="#">reply</a></li>
            <li><a href="#">permalink</a></li>
            <li><a href="#">offensive?</a></li>
           </ul>
          </li>
        </ul>
      </span>
    </div>
  </body>
</html>

La solution

Mettez à jour votre css avec un rembourrage gauche sur « .comment-li contenu » et supprimer la marge sur « .head »

.comment-contents li {
list-style-type: none;
margin-bottom: 10px;
padding-left: 60px;
}

.head {
margin-left:0px;
}

Pendant que vous y êtes, il suffit d'utiliser le remplissage au lieu de la marge pour « .comment-contenu li »:

.comment-contents li {
list-style-type: none;
padding: 0 0 10px 60px;
}

Je recommande de ne pas utiliser le rembourrage et la marge sur une classe à moins que nécessaire absolutly.

Autres conseils

Ne pas avoir le temps de faire CSS au moment (peut-être plus tard), mais vous devriez être en mesure d'atteindre le look avec ce balisage:

<div class="comment">
     <p class="user">
        <a href="#">
          <img src="http://www.gravatar.com/avatar/550deada0ac679dfc3c9103b674760af?s=128&d=identicon&r=PG" height="60" width="60">
        </a>
        <a href="#">Nathan</a>, posted 2 hours ago
        <a href="#" class="comment-collapse">[-]</a>
     </p>
     <p>The king took off his hat and looked at it. Instantly an immense
            crowd gathered. The news spread like wildfire. From a dozen leading
            dailies,reporters and cameramen came rushing to the scene pellmell in
            highpowered monoplanes. Hundreds of reserves,responding without
            hesitation to a riotcall,displayed with amazing promptness quite
            unparalleled inability to control the everincreasing multitude,but
            not before any number of unavoidable accidents had informally
            occurred.
     </p>
     <p>Chapter 1 - untitled (eecummings)</p>
  <ul class="commentTools">
    <li class="voteUp"><a href="#">vote up</a></li>    
    <li class="voteDown"><a href="#">vote down</a></li>        
    <li><a href="#">reply</a></li>
    <li><a href="#">permalink</a></li>
    <li><a href="#">offensive?</a></li>
  </ul>
</div>

Et le CSS

.comment {
   position:relative;
    padding-left:75px;
}
.comment p {

}
.comment .user img {
  float:left;
  margin-left:-60px;
}
.comment .commentTools {
    padding-left:0;
}
.comment .commentTools li {
   display:inline;
}
.comment .commentTools .voteUp, .comment .commentTools .voteDown {
   position:absolute;
   display: block;
   left:0;
}
.comment .commentTools .voteUp {
    top:0;
}
.comment .commentTools .voteDown {
    top:15px;
}
.comment .commentTools .voteUp a, .comment .commentTools .voteDown  a {
  display:block;
  width: 15px;
  height: 15px;
  text-indent:-5000em;
}
.comment .commentTools .voteUp a {
    background: url(http://www.reddit.com/static/aupgray.gif) no-repeat;
}
.comment .commentTools .voteDown a {
    background: url(http://www.reddit.com/static/adowngray.gif) no-repeat;
}

Je n'ai pas testé donc il peut y avoir quelques bugs. Permettez-moi de savoir si l'un des youwant CSS expliqué.

Que diriez-vous le réglage de la p marge gauche à régler à 30px?

Licencié sous: CC-BY-SA avec attribution

Non affilié à StackOverflow