CODEWITHSUNDEEP
htmlcssbootstrap-4
Menno Van Dijk
Menno Van Dijk

Reputation: 903

Whitespace between list items in a bootstrap container-row-column

I'm currently struggling with whitespace that is coming from seemingly nowhere within a list of dropdown items that I created. Visually, it looks as follows:

enter image description here

HTML code of issue (uses bootstrap 4.3.1):

 <div class="container">
        <div class="row">
                <div class="col">
                    <center>Test Column</center>
                    <div class="dropdown">
                        <li><a href="#">Test text 1<span>&#10003;</span></a> </li><br>
                            <a href="#">
                                <div class="dropdown-content">
                                    <p>Dropdown item 1</p>
                                </div>
                            </a>
                    </div>
                    <div class="dropdown">
                        <li><a href="#">Test text 2<span>&#10003;</span></a> </li><br>
                            <a href="#">
                                <div class="dropdown-content">
                                    <p>Dropdown item 2</p>
                                </div>
                            </a>
                    </div>
                </div>
        </div>
</div>

CSS:

/* force list items on seperate line each */
ul {
  display: inline;
}

/* setup for showing which links have been visited already */
a span {
  color: white;
}
a:hover {
 text-decoration: none;
}

a:visited span {
  color: green;
}

/* Dropdown Menu */
.dropdown {
  position: relative;
  display: block;
}

.dropdown-content {
  display: none;
  position: absolute;
  overflow: hidden;
  background-color: #f9f9f9;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  padding: 12px 16px;
  z-index: 1;
  left: 20%;
}

.text-window {
    min-width: 320px;
    min-height: 480px;
}

.dropdown:hover .dropdown-content {
  display: inline-block;
}

Additionally, I have replicated the issue in this JSFiddle.

Upvotes: 0

Views: 66

Answers (2)

kirankumar
kirankumar

Reputation: 135

Remove breakpoint
in your li HTML code.

Break tags contain extra space between the top and bottom. It's like goes to the next line. 

<div class="container">
    <div class="row">
            <div class="col">
                <center>Test Column</center>
                <div class="dropdown">
                    <li><a href="#">Test text 1<span>&#10003;</span></a> </li>
                        <a href="#">
                            <div class="dropdown-content">
                                <p>Dropdown item 1</p>
                            </div>
                        </a>
                </div>
                <div class="dropdown">
                    <li><a href="#">Test text 2<span>&#10003;</span></a> </li>
                        <a href="#">
                            <div class="dropdown-content">
                                <p>Dropdown item 2</p>
                            </div>
                        </a>
                </div>
            </div>
    </div>

Upvotes: 0

Tafadzwa Gonera
Tafadzwa Gonera

Reputation: 352

Remove the <br> tags in this line <li><a href="#">Test text 1<span>&#10003;</span></a> </li><br>

Upvotes: 1

Related Questions