HTML: li et de a href

Donc, j'ai mon style ul li, il est livré dans une boîte déroulante et lorsque vous marquez sur chaque li il a:hover avec le violet. Maintenant, dans chaque li theres un nom. Je veux faire un lien, de sorte que lorsque vous cliquez n'importe où dans le marqué li vous rendre sur le lien.

Droit maintenant, lorsque vous cliquez quelque part dans la li ne se passe rien, seulement si vous cliquez sur le nom DANS la li..

Voici mon code:

  echo '<a href="profil.php?id='.$result->id.'"><li onClick="fill(\''.addslashes($result->full_name).'\');">'.$result->full_name.'</li></a>';

Comment puis-je faire cela?

    .suggestionsBox {
    position: absolute;
    left: 0px;
    top: 10px;
    margin: 26px 0px 0px 0px;
    width: 200px;
    padding:0px;
    background-color: #000;
    border-top: 3px solid #000;
    color: #fff;
}
.suggestionList {
    margin: 0px;
    padding: 0px;
}
.suggestionList ul li {
    list-style:none;
    margin: 0px;
    padding: 6px;
    border-bottom:1px dotted #5a2156;
    cursor: pointer;
}
.suggestionList ul li:hover {
    background-color: #5a2156;
    color:#000;
}
ul {
    font-family:Arial, Helvetica, sans-serif;
    font-size:11px;
    color:#FFF;
    padding:0;
    margin:0;
}

OriginalL'auteur Karem | 2010-09-13

  1. 13

    La A élément ne peut contenir que des éléments de niveau et LI n'est autorisé que dans OL et UL. Mais LI permet A à l'intérieur, afin de faire l'inverse:

    echo '<li onClick="fill(\''.addslashes($result->full_name).'\');"><a href="profil.php?id='.$result->id.'">'.$result->full_name.'</a></li>';

    Pour faire de la A remplir l'espace disponible, l'afficher comme élément de bloc:

    li > a {
    display: block;
}
    Cela ne résoudra pas le problème; mais indépendamment un li ne peut être qu'un enfant d'un ol ou ul.
    À l'aide de <a> dans un <li> est bon. Pour assurer le lien est le même que les autres éléments de la liste, considérons le code CSS suivant: li > a { display: block; font-weight:inherit!important; font-family:inherit!important; color:inherit!important; text-decoration:hériter!important; }

    OriginalL'auteur Gumbo

  2. 2

    Peut-être un peu tard, mais pour ceux qui ont le même problème:

    I serait (et ont fait) comme suit:

    .suggestionList ul li {
list-style:none;
margin: 0px;
padding: 0px;
border-bottom:1px dotted #5a2156;
cursor: pointer;
}
.suggestionList ul li a {
display: block;
padding: 6px;
}

    L'élément li n'a pas plus de rembourrage, et le cœur est aussi grand que l'élément li.

    OriginalL'auteur SixKnight

  3. 0

    Je ne suis pas sûr que vous devriez mettre un <li> à l'intérieur d'un ancrage <a> comme ça. Si vous voulez l'ensemble de la ligne de cliquer, il suffit de mettre la <a> à l'intérieur de la <li> et il devrait prendre la bonne largeur. si non, donnez-lui un jeu de la hauteur et de la largeur et de la <li> devraient s'ajuster parfaitement autour de lui, le rendre cliquable.

    donc, comme:

    echo '<li onClick="fill(\''.addslashes($result->full_name).'\');"><a href="profil.php?id='.$result->id.'">'.$result->full_name.'</a></li>';

    et puis le css:

    a{height : 20px;}

    <a> est en ligne, de sorte que sa largeur ne peut être réglé, mais il va envelopper serré autour d'un texte.

    OriginalL'auteur Alex B

  4. 0

    Tout d'abord, un li élément doit être un enfant direct d'un ul élément, donc vous devez avoir l' a balise à l'intérieur de la li balises.

    Ici est de savoir comment je construire le HTML /CSS; l'incorporer dans votre php toutefois vous pensez qu'il serait le mieux.

    <ul>
  <li><a href="#"><span class="list1">Content 1</span></a></li>
</ul>

.list1 {width: 120px;} /* Set this to whatever width you want the list to fill*/

    OriginalL'auteur Moses

  5. 0

    C'est ce que j'utilise sur mon projet et il fonctionne très bien. Le dépassement de cesse de le a href de se développer à l'extérieur de la li et de 100% de remplissage remplit l'espace.

    #cbtn li
{
    height: 61px;
    border: none;
    outline: none;
    list-style: none;
    float: left;
    overflow: hidden;
}

#cbtn li a
{
    padding: 100%;
    outline: none;
}

    Exemple de ce travail: http://jsbin.com/ilocow/4/

    OriginalL'auteur yanike