What steps must be taken to remove the icon located in the upper left corner?

https://i.sstatic.net/vQprs.png

I am struggling to align the remove icon to the top. Here is what I have attempted:

.skills ul {
  width: 100%;
  margin: 10px 0px 0px 0px;
  padding: 0px;
  float: left;
}

.skills li {
  border: 1px solid #a7dbf5;
  list-style: none;
  text-decoration: none;
  text-transform: capitalize;
  padding: 7px 10px 0px 10px;
  background: #bee5f9;
  color: #074c6f;
  font-size: 13px;
  text-align: left;
  float: left;
  border-radius: 50px;
  margin: 3px 6px;
  height: 31px;
}
<span class="skills">
  <ul id="loaded_skills">
    <li class="skills_selector current_selected_skill" value="3"> AJAX
      <input type="checkbox" name="skills" value="3" style="display:none">
      <a href="#">x</a>
    </li>
    <li class="skills_selector current_selected_skill" value="6"> Action Script 3.0 (Mac Version)
      <input type="checkbox" name="skills" value="6" style="display:none">
      <a href="#">x</a>
    </li>
  </ul>
</span>

htmlcsstwitter-bootstrap

Answer №1

Consider incorporating the following CSS code into your stylesheet:

.categories_selector {
  position: relative;
}

.categories_selector a {
  position: absolute;
  top: 0;
  left: 30px;
  transform: translateY(-50%);
}

Answer №2

To properly align the close icon, you will need to utilize position:absolute and adjust the top and left values. Don't forget to also set the position:relative for the parent li.

.skills ul {
  width: 100%;
  margin: 10px 0px 0px 0px;
  padding: 0px;
  float: left;
}

.skills li {
  border: 1px solid #a7dbf5;
  list-style: none;
  text-decoration: none;
  text-transform: capitalize;
  padding: 7px 10px 0px 10px;
  background: #bee5f9;
  color: #074c6f;
  font-size: 13px;
  text-align: left;
  float: left;
  border-radius: 50px;
  margin: 3px 6px;
  height: 31px;
  position: relative;
}

.skills li a {
  position: absolute;
  top: -10px;
  left: 0px;
  background: red;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}
<div class="skills">
  <ul id="loaded_skills">
    <li class="skills_selector current_selected_skill" value="3"> AJAX
      <input type="checkbox" name="skills" value="3" style="display:none">
      <a href="#">x</a>
    </li>
    <li class="skills_selector current_selected_skill" value="6"> Action Script 3.0 (Mac Version)
      <input type="checkbox" name="skills" value="6" style="display:none">
      <a href="#">x</a>
    </li>
  </ul>
</div>

Answer №3

Give this a shot.

.skills ul {
    width: 100%;
    margin: 10px 0px 0px 0px;
    padding: 0px;
    float: left;
}

.skills li {
    border: 1px solid #a7dbf5;
    list-style: none;
    text-decoration: none;
    text-transform: capitalize;
    padding: 7px 40px;
    background: #bee5f9;
    color: #074c6f;
    font-size: 13px;
    text-align: left;
    float: left;
    border-radius: 50px;
    margin: 3px 6px;
    position: relative;
}

.skills .remove {
  position: absolute;
  top: 0;
  transform: translate(0, -50%);
  color: red;
  left: 20px;
  text-decoration: none;
}
<span class="skills">
            <ul id="loaded_skills">
                <li class="skills_selector current_selected_skill" value="3"> AJAX
                    <input type="checkbox" name="skills" value="3" style="display:none">
                    <a href="#" class='remove'>x</a>
                </li>

                <li class="skills_selector current_selected_skill" value="6"> Action Script 3.0 (Mac Version)
                    <input type="checkbox" name="skills" value="6" style="display:none">
                    <a href="#" class='remove'>x</a>
                </li>
            </ul>
        </span>

Answer №4

Hopefully this solution meets your needs

.skills ul {
    width: 100%;
    margin: 10px 0px 0px 0px;
    padding: 0px;
    float: left;
}

.skills li {
  position:relative;
    border: 1px solid #a7dbf5;
    list-style: none;
    text-decoration: none;
    text-transform: capitalize;
    padding: 7px 10px 0px 10px;
    background: #bee5f9;
    color: #074c6f;
    font-size: 13px;
    text-align: left;
    float: left;
    border-radius: 50px;
    margin: 3px 6px;
    height: 31px;
}
.skills li>a{
  position:absolute;
  padding:3px;
  top:-15px;
  background-color:orange;
  color:white;
  border-radius:50%;
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

The bootstrap modal is appearing correctly, but the content within it is not displaying properly

I've been working on a website and added a modal for signup. However, when the user clicks on the signup button, the modal appears but the content inside it is not clickable. Can someone please help me with this issue? Here is the code snippet I am us ...

javascriptcsstwitter-bootstrap

Adjust the CSS styling to ensure that the div or iframe expands to fit the entire height of the

Having trouble making a map embedded via an iframe on a WordPress page display responsively at full height independent of the device? Check out: . To clarify, by full height, I mean that the bottom of the map should not extend beyond the screen, eliminati ...

htmlcss

jQuery Refuses to Perform Animation

I'm facing an issue with animating a specific element using jQuery while scrolling down the page. My goal is to change the background color of the element from transparent to black, but so far, my attempts have been unsuccessful. Can someone please pr ...

javascriptjqueryhtmlcss

The nested navigation link disappears suddenly on Internet Explorer 9

This query closely resembles another issue: Nested menu keeps vanishing on IE 8 & 9. However, the solution provided is quite limited. Why do my nested menus disappear before I can reach them with my cursor unless I move it swiftly? This peculiar behavi ...

cssinternet-explorer-9nav

Prevent double tap selection

At times, I enable the user to click on the <li> or <span class="icon"> elements, but if they happen to click twice, it causes a bit of chaos and spreads the blue selection all over :/ To address this issue, I have come up with two solutions: ...

htmlcssdouble-click

Choosing CSS/JS selector: Pick the final element with a class that does not match

My goal is to extract the most recent td element from the latest tr within an HTML table, ensuring that the latest td does not belong to the disabled class. I am attempting to achieve this using pure JavaScript with CSS selectors (without relying on jQuer ...

javascriptcssselectelement

Having trouble getting FancyBox to function properly

Initially, fancybox was functioning properly. However, upon expansion of the site's content, it ceased to work and I am baffled as to where I made a mistake. <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquer ...

jqueryhtmlcssfancyboxprettyphoto

Image showcasing the background

I'm facing an issue with adding a background image to my project Even after trying to add it globally, the background image is not showing up on the Next.js index page. import { Inter } from 'next/font/google' const inter = Inter({ subsets: ...

cssreactjsnext.jsbackground-image

Limiting the use of CSS selectors to a single class without the need to include the class name multiple

I am trying to find a solution to avoid repeating the same class name multiple times in CSS. For instance, if I have: .class1 div { color: red } .class1 h2 { color: blue } .class1 p { color: yellow } Is there a way to consolidate these three rules under ...

css

Incorporating JavaScript into a pre-existing HTML and CSS user interface

After successfully coding a chat app UI for my project site using CSS and HTML, I am now facing the challenge of adding functionality to my existing code. The issue is setting up the client server and integrating chatting functions into my current UI. Mo ...

javascripthtmlcssreactjsmern

Is there a way to make the <iframe> adjust its size as the element it contains grows, without

Seeking assistance with a specific issue. My goal is to have an iframe appear on hover of another element and expand with it. The problem I'm facing is that the iframe shows up quickly and extends beyond its parent container. Here's what I have: ...

cssiframe

Unusual Behavior of CSS and JQuery Selectors

As I was working with jquery selectors, I encountered something quite unexpected. This is an example of my HTML: <ul id="unordered-list"> <li> <img src="https://www.google.com/images/srpr/logo4w.png" width="40" height="40"/> ...

jquerycssjquery-selectorscss-selectors

Utilizing Javascript and HTML5 to upload a .txt file and separate each line into separate input fields

Currently, I am developing an online tool that functions as a database where users can input text data into various fields, save the information in a txt.file, and then retrieve the same data when revisiting the website. I have successfully implemented co ...

javascriptjqueryhtmlline-breaks

How can I improve the smoothness of my CSS transition when resizing background images?

I'm currently working on creating an intro movie for a game and I thought it would be interesting to use CSS animations. However, I've noticed that some parts of the animation appear bumpy and inconsistent. It seems that depending on the transiti ...

jquerycss

Implementing the Applet Param Tag using JavaScript or jQuery

<applet id="applet" code="myclass.class"> <param name="Access_ID" value="newaccessid"> <param name="App_ID" value="newappid"> <param name="Current_Url" value="newticketurl"> <param name="Bug_ID" value="newbugid"&g ...

javajavascriptjqueryhtmlapplet

Using :target in CSS for transitions

I'm in the process of setting up a system that allows me to control which div is displayed on the screen at any given time. I have two divs that should be displayed using the buttons "page1" and "page2". My approach involved giving each div an absolu ...

htmlcss

Tips for making the background image fit perfectly within a div element

I have a calendar div that I want to customize with a background image and text. How can I achieve this? https://i.sstatic.net/hVQm2.jpg Here is my code: .calenderArrivalDiv{ margin-top: 15%; margin-bottom: 1%; ...

cssangularjstwitter-bootstrap-3

Erase embedded frame from a Google Sheets document

Is there a way for me to customize the frame and replace it with my own design? Click here to view the Google Sheet embedded frame ...

htmlcssgoogle-sheets

The function fromEvent is throwing an error stating that the property does not exist on the type 'Event'

I'm attempting to adjust the position of an element based on the cursor's location. Here is the code I am currently using: this.ngZone.runOutsideAngular(() => { fromEvent(window, 'mousemove').pipe( filter(() => this.hove ...

htmlcssangular

Tips on Importing a Javascript Module from an external javascript file into an <script> tag within an HTML file

I'm facing an issue while attempting to import the 'JSZip' module from an external node package called JSZip in my HTML File. The usual method of importing it directly using the import command is not working: <script> import ...

javascripthtmltypescriptfigmafigma-api