Inside a span block, there is an icon:
<span><i></i>Text</span>
The CSS for the icon is as follows:
i {
display: inline-block;
width: 20px;
height: 20px;
}
When the text inside the span is long, it wraps to the next line under the icon i.
How can we wrap the text with a margin-left equal to the width of the icon?
Currently, the layout looks like this:
Icon - Text he
re
However, we need it to look like this:
Icon - Text he
re
span {
position: relative;
padding-left: 25px;
width: 200px;
display: inline-block;
border: 1px solid red;
margin: 1em;
}
i {
position: absolute;
left: 0;
width: 20px;
height: 20px;
background: pink;
}<span><i>I</i>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Delectus, quam.</span>To implement a flexible layout, you can utilize flexbox:
span {
display: flex;
}
i {
margin-right: 4px;
min-width: 20px;
height: 20px;
border: 1px solid #000;
background: red;
}<span><i></i>Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text </span>To adjust the positioning of the span and icon, you can move the span to the right and the icon to the left:
i {
display: inline-block;
width: 20px;
height: 20px;
margin-left: -20px;
background: yellow;
}
span {
display: inline-block;
width: 40px;
margin-left: 20px;
}<span><i></i>Text here</span>I am currently working on creating a search box using HTML and the Flask framework in Python. Below is the layout I am working with: Layout My goal is to input text into the search box and have it highlighted within the text area on the same HTML page. F ...
Setting up a listener for the browser window, I use this line of code: $(window).resize(resizeObjects); However, during certain points in the web application cycle, I need to remove this event from window.resize. Can anyone provide guidance on how to det ...
When working with Angular, I am faced with the challenge of making a panel header sticky based on the user's scroll position on the page. I have identified two potential solutions for achieving this functionality. One involves using pure CSS with pos ...
I have a concept in mind, but I'm struggling to piece it together. I have bits of different methods that just don't seem to align. That's why I'm reaching out for your expertise. Let's say I have 3 content containers with the clas ...
I've been grappling with this issue for days now and could really use some guidance. Despite scouring the web, I'm unsure if I've approached it correctly. What I'm trying to achieve is having an alert box pop up each time a user hovers ...
This is my first question on Stack Overflow and I have not made any progress after a day of research. I am currently experimenting with WebDriver in Netbeans for testing our services. We chose WebDriver because we will need to test file uploads in the fut ...
I have a dropdown menu and need to determine whether to display a specific div using the value selected via v-if. <select class="custom-select custom-select-sm" id="lang"> <option value="1">English</option> <option value="2">Sv ...
My second page retrieves data from an Ajax call on the home page, but the header lacks JQuery styling and I suspect a connection between the two. Here is the HTML for the dynamically generated page: <div data-role="page" id="breakdownDialog" data-add-b ...
Hey there, I need some help with adding an icon "services" section to my website. CSS is not my strongest suit, so I'm reaching out for assistance. My goal is to create blocks for the icons that don't touch the edge of the page and have a margin ...
I am currently working on creating a draggable map. I have successfully limited the draggable child for the left and top sides, but I am struggling to do the same for the right and bottom sides. How can I restrict the movement of a draggable child based o ...
Take a look at the image below. It combines two graphs, with different curves represented by solid lines, dotted lines, and various forms of dashed lines with varying stroke lengths. In summary: I am looking for a simple way to create solid lines, dashed ...
I have a dynamic image stored on my web server at example.com/webcam.jpg that is continuously updated by the server. My goal is to display this image on a static HTML page with a looping effect that smoothly transitions from the previous image to the upda ...
How can I truncate link text on a header with an ellipsis but keep the image at the end as a glyphicon? And all of this without using JS. Here's my code: <!DOCTYPE html> <html> <body> <ul> <li> <a href="# ...
Having an issue with my code regarding the menu. I am trying to create a navbar that fills the height on the left side for PC screens and becomes scrollable at the top for mobile versions. The problem lies in my flex container not properly filling the scr ...
There are numerous guides available demonstrating how to utilize sed for modifying/removing HTML tags, and most of them typically suggest something along the lines of... sed 's/<[^>]\+>//g' However, what I am seeking is the opposi ...
I've put in a lot of effort and double-checked everything, but for some reason this tabify function just won't work. I have gone through my code 100 times but still can't seem to pinpoint the error. Here is the code I am working with: <! ...
To better explain my issue, let's consider a simple example: Imagine I have a form that collects information about a user: <form action="#" method="post" id="myform"> <input type="text" name="fname" /> <input type="text" name= ...
I have been searching for a solution tailored to my specific needs, and I am encountering difficulties in getting a seemingly simple jQuery code to function as expected. Here is the link to my basic fiddle: http://jsfiddle.net/LBHxc/ (I apologize for the ...
I am a beginner with the Parse database and I am currently working on implementing a code that allows users to sign up, with their information stored in the Parse database. However, I am encountering an issue where the values are not uploading as expected. ...
Trying to display different icons based on a property that contains specific words. If the property includes "Health Care" or "Health Care .....", I want to show one image, otherwise another. I've tried using ng-show but my syntax seems off. Any sugge ...