Tiret qui apparait avec un display:inline;

**zoumzoum59** · 19/02/2023, 14h15

Bonjour a tous,

Je suis a la recherche d'information sur l'utilisation d'un display; inline; qui insert un tiret à la fin de mon texte et je ne comprend pas pourquoi, ni comment le supprimer.

voici une image du rendu, j'ai entouré les tirets:

Nom : Screenshot_19.jpg
Affichages : 305
Taille : 15,5 Ko

Nom : Screenshot_19.jpg
Affichages : 305
Taille : 15,5 Ko

Code CSS :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
nav ul {
    list-style-type:none;
 
}
 
nav li{
    display: inline;
    vertical-align: top;
    font-size: 120%;
    border-style:none;
 
}
.dropdown-item{
    background-color: white;
    text-align: left;
}

Code HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
<nav class="navbar  ">
      <div class="">
      </div>
 
 
    <ul style="list-style-type:none; display:inline-block;">
      <li class="btn_contact">
        <!-- <div id="logo"> -->
          <a id="logo1" href="index.html"><img src="https://www.developpez.net/forums/images/logo_trv.png"/></a>
 
 
        <!-- </div> -->
 
      </li>
      <li class="btn_contact">
        <a href="index.html">
        <button class=" " type="button">Accueil</button>
      </a>
    </li>
 
 
 
        <li class=" btn_contact">
          <a href="temperature.html">
          <button id="en-cours" class=" " type="button">Température <br>report</button>
        </a>
      </li>
 
 
 
        <li class=" btn_contact">
        <a href="humidite.html">
          <button class=" " type="button">Humidité <br>report</button>
        </a>
      </li>
 
 
 
 
 
        <li class="btn_contact">
          <a href="pression.html">
          <button class=" " type="button">Pression <br>report</button>
          </a>
        </li>
 
 
 
        <li class="dropdown">
          <button type="button" class="  dropdown-toggle" data-bs-toggle="dropdown">
            Matériel d'acquisition<br>de données
          </button>
          <ul class="dropdown-menu">
 
            <li><a class="dropdown-item" href="http://tvaira.free.fr/esp8266/nodemcu-lolin-esp8266.html" onclick="return ConfirmMessage();" target="_blank"><strong>Module NodeMCU  ESP8266</strong></a></li>
            <li><a class="dropdown-item" href="https://www.raspberryme.com/guide-du-capteur-bme280-avec-arduino-pression-temperature-humidite/" onclick="return ConfirmMessage();" target="_blank"><strong>BME280</strong></a></li>
            <li><a class="dropdown-item" href="https://tutoduino.fr/debuter/capteur-temperature/#le-capteur-dht11 onclick="return ConfirmMessage();" target="_blank""><strong>DHT11</strong></a></li>
            <li><a class="dropdown-item" href="https://wiki.seeedstudio.com/Grove-TempAndHumi_Sensor-SHT31/" onclick="return ConfirmMessage();" target="_blank"><strong>SHT31</strong></a></li>
          </ul>
        </li>
 
 
 
        <li class=" first btn_contact">
          <a href="http://1.1.1.1:8080/admin/">
          <button class=" " type="button">Admin</button>
        </a>
      </li>
 
 
    </nav>

Quelqu'un de vous aurait une idée?

Merci d'avance

**ddaweb** · 19/02/2023, 16h18

Bonjour,

Cela ressemble fort à un lien standard souligné, essayez dans le CSS :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
nav li{
    display: inline;
    vertical-align: top;
    font-size: 120%;
    border-style:none;
    text-decoration: none; // ----- Ajouter
}

Pourquoi mettre ce qui est en rouge ? :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
<li class="btn_contact">
   <a href="index.html">
        <button class=" " type="button">Accueil</button>
   </a>
</li>

NB :
- vous utilisez du CSS et ensuite du CSS dans votre code -> le mieux est de le faire directement depuis votre fichier CSS, mais alors mettre les bonnes balises afin de l'activer
- je vois des espaces dans vos class : pourquoi ?
- class="" est inutile

**zoumzoum59** · 19/02/2023, 18h12

Merci ddaweb pour tes réponses a mon problème,

je viens d'essayer de mettre : "text-decoration:none", mais cela n'a rien changé, j'ai toujours le même problème.

Sinon, c'est exact "class=" " ne sert a rien il faut que je le supprime.

Si tu as une autre idée, pour info cela n'apparait que avec inline, si je mets inline-block, le code ne réagit pas pareil mais les tirets ne sont pas apparent.

**NoSmoking** · 19/02/2023, 18h31

Bonjour,
il te faut mettre le sur les éléments <a> :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
nav a {
  text-decoration: none;
}

Concernant ta construction HTML du style :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
<a href="...">
  <button>...</button>
</a>

outre le fait que ce n'est pas conforme, quel en est l’intérêt, c'est soit l'un soit l'autre.

**zoumzoum59** · 19/02/2023, 18h53

Merci NoSmoking,

Ca fonctionne avec la modification:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
nav a {
  text-decoration: none;
}

Par contre je ne te suis pas sur <a> ou <button>, tu peux m'en dire plus, car dans mon esprit le <button> est la pour créer le bouton et le <a> et la pour lui adjoindre le lien.

PS: j'ai repris cette construction d'un code Bootstrap

**NoSmoking** · 19/02/2023, 19h10

Par contre je ne te suis pas sur <a> ou <button>, tu peux m'en dire plus, car dans mon esprit le <button> est la pour créer le bouton et le <a> et la pour lui adjoindre le lien.

Un bouton sert à déclencher une action le plus souvent liée à JavaScript, un lien sert à diriger vers un lien interne comme externe.
Dans les deux cas tu peux faire ressembler l'un à l'autre, et inversement, en utilisant le CSS.

PS: j'ai repris cette construction d'un code Bootstrap

J’espère que tu as mal interprété

**ddaweb** · 19/02/2023, 19h55

Envoyé par NoSmoking

il te faut mettre le sur les éléments <a>

Juste, c'est moi qui ai fourché

**zoumzoum59** · 20/02/2023, 09h29

Bonjour

J'ai dis que c'était bon pour le petit tiret, mais pas tout a fait, c'est bon mais pas quand je fait un survol, i réapparait.
J'ai donc essayé d’agir au niveau du survol, mais rien n'y fait:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
nav button{
    margin-left: 10px;
    margin-right: 10px;
    background-color: white;
    border-style:none;
    font-weight:bold;
    font-size:larger ;
    /*white-space: nowrap;*/
}
 
nav button:focus, nav button:hover{
    background-color: none;
    color: $primaryColor;
    border-color: none;
    border-style:none;
 
}
.nav-link, .navbar-brand{
    color: black !important;
}
nav ul {
    list-style-type:none;
 
}
nav a {
    text-decoration: none;
  }
nav a:focus, nav a:hover {
    text-decoration: none;
  }

Tiret qui apparait avec un display:inline;

CSS

Vue hybride

Discussions similaires

Partager

Partager