How can I remove bullets from html list without losing other formatting?-CodePudding

I am new to web development and I need some help. I want to remove the bullet points from an unordered list. I searched for a solution to my problem before asking and found the following method :

<ul style="list-style: none;">
  <li>List item with no bullet</li>
  <li>Second item</li>
</ul>

But applying this method breaks my design. What am I doing wrong?

.link-container {
  background-color: #4e4e4e91;
  border-color:rgba(129, 191, 235, 0.978);
  border-width: 1px;
  border-style: solid;
  height: 50%;
  border: 2px solid rgba(129, 191, 235, 0.978) ;
  border-radius: 30px;
}

.links {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-left: 100px;
  margin-right: 100px;
}

a {
  color: rgb(245, 245, 245);
  text-decoration: none;
  font-weight: bold; 
  border: 1px solid ;
  background: 0;
  font-weight: 600;
  border-radius: 40px;
  padding: 0 10px;   
}

a:hover{
  color: rgb(129, 191, 235)
}

.input-box {
  background-color: white;
  color: gb(129, 191, 235);
}

<div class= "link-container">
  <h6 >  
    <li>
      <a href="https://www.visitberlin.de/de/sehenswuerdigkeiten-berlin" 
      itemprop="possibilities"> Sehenswürdigkeiten</a>
        </a>
    </li>

    <li> 
      <a href="https://service.berlin.de/behoerden/"  
      itemprop="possibilities">Behörden </a>
    </li>

    <li>
      <a href="https://www.berlin.de/clubs-und-party/clubguide/a-z/" 
      itemprop="possibilities">Clubs</a>
    </li>

    <li>
      <a href="https://www.berlin.de/tourismus/parks-und-gaerten/"  
      >Parks</a>
    </li>

    <li>
      <a href="https://www.berlin.de/stadtplan/" 
      itemprop="possibilities" >Stadtkarte</a>
    </li>
  </h6>
</div>

CodePudding user response：

I solved this problem with the following steps :

Replace the <h6></h6> tags with <ul></ul>
Insert this rule into the CSS : li { list-style-type: none; }

CodePudding user response：

As Thomas L. mentioned in the comments, you can add a CSS style component to your code to hide the bullet points that are being created for the li tags.

So in each of your li tags you would change them like so:

<li style="list-style: none">

Here is your modified code:

.link-container {
    background-color: #4e4e4e91;
    border-color:rgba(129, 191, 235, 0.978);
    border-width: 1px;
    border-style: solid;
    height: 50%;
    border: 2px solid rgba(129, 191, 235, 0.978) ;
    border-radius: 30px;

    }

        .links {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-left: 100px;
            margin-right: 100px;
        }

        a {
            color: rgb(245, 245, 245);
            text-decoration: none;
            font-weight: bold; 
            border: 1px solid ;
            background: 0;
            font-weight: 600;
            border-radius: 40px;
          
    
    padding: 0 10px;   
        }
        
        a:hover{
            
            color: rgb(129, 191, 235)
            
            
        }

        .input-box {
            background-color: white;
            color: gb(129, 191, 235);
        }

<div>
    <div class= "link-container">
      <h6 >
        
     <li style="list-style: none">
         <a href="https://www.visitberlin.de/de/sehenswuerdigkeiten-berlin"  itemprop="possibilities"> Sehenswürdigkeiten</a>
     </li>

     <li style="list-style: none"> 
            <a href="https://service.berlin.de/behoerden/"  
            itemprop="possibilities">Behörden </a>
     </li>

    <li style="list-style: none">
        <a href="https://www.berlin.de/clubs-und-party/clubguide/a-z/" 
        itemprop="possibilities">Clubs</a>
     </li>

    <li style="list-style: none">
        <a href="https://www.berlin.de/tourismus/parks-und-gaerten/"  
        >Parks</a>
     </li>

     <li style="list-style: none">
        <a href="https://www.berlin.de/stadtplan/" 
        itemprop="possibilities" >Stadtkarte</a>
    </li>
      </h6>
      </div>
</div>