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>My golden rule for media queries is set... @media only screen and (min-width: 768px) and (max-width: 1080px) { Strangely, I picked 1080 as a test number... Unexpectedly, the background color changes at 1190px when resizing my page to test breakpoints. ...
Here is the code I've put together for you to review, with no official purpose in mind. I just saved this code to use at a later time. <script> var apps = angular.module('myApp', ['ngAnimate']); //header apps.cont ...
At the moment, I have refrained from using any additional styling or .css files on my webpage. The width of the Alert element currently spans across the entire page. Despite my attempts to specify the width in the code snippet below, no noticeable change ...
I am looking for a way to display each div within the content-wrapper after a specific time interval. Currently, I am using individual classes like el1, el2, el3, ... to accomplish this task. However, when dealing with content-wrappers containing multipl ...
Could you please provide some guidance on creating a button design similar to this one? I've made progress with the code shown below, but still need to make adjustments like changing the font. <!DOCTYPE html> <html> <head> <sty ...
I am attempting to combine two CSS transition effects together. The first code snippet works well with 'animate': $('.txt').css({'transition': 'transform .5s ease-in-out ', 'transform': 'translate(3 ...
Do you know why the social icons turn black when hovered over? Could it be related to the navbar buttons? Is there a way to change the hover color to blue or red only? Link to code snippet <body> <nav class="navbar navbar-default navbar-fixed-t ...
Within my form, there is a table containing records generated by a for loop iterating through items in a list. Each record has a submit button that triggers an AJAX call to serialize and POST the form data to the controller. The goal is to only POST data f ...
Essentially, in my attempt to create a four-column layout, I have the following HTML code: <div> <div>A column</div> <div>A column</div> <div>A column</div> <div>A column</div> </div ...
I am facing challenges with creating a sticky menu that shows/hides with a click button. Considering abandoning the show/hide feature altogether and rebuilding it from scratch in the future. Two major problems I have identified: How can I make the sho ...
Query: How do I identify the data type of the value entered in an input field? Whenever I use typeof, it always returns string unless the string is empty. I searched various forums extensively but couldn't find a solution. Can someone assist me with t ...
Take a look at dropbox's website here: Have you noticed how the footer with "Learn more" remains fixed at the bottom regardless of window resizing until you click or scroll down? position: absolute; bottom: 50px; left: 0; width: 100%; text-align: ce ...
I am facing a challenge with my code and would appreciate some help. I am trying to load an XML file using jQuery and then use DataTables on my HTML table. However, the plugin doesn't seem to be functioning correctly. When I manually create an HTML ta ...
Is there a way to incorporate transitions into the AppBar element within Material-UI? I have tried adjusting the class properties, but unfortunately, I'm not seeing any animation. Can anyone pinpoint what the issue might be? To see the code in action ...
Here is some dynamically generated content in the left column: <div v-for="index in total" :key="index"> <h2>Dynamic content: <span v-text="index + ' of ' + total"></span></h2> </div> There is also a butt ...
Issue at hand : My JavaScript is not functioning properly in my .php files CSS not applying while scrolling *CSS Files are named "var.css" #kepala { padding: 10px; top: 0px; left: 0px; right: 0px; position: fixed; background - c ...
Attempting to utilize the material ui library in a react app has brought an issue to light. It appears that styling colored text does not work as expected for multiline textfields. Consider the following scenario: import React, { Component } from 'r ...
I'm having trouble with my code for a menu with drop-downs in ie8. It works fine in all other browsers but there seems to be an issue with the positioning of the main menu and submenus. Any thoughts on what might be causing this? <ul id="nav" clas ...
I have two keys stored in localStorage and I want to display one of them on my template. I'm having trouble accessing these values. I even created an interface specifically for storing the value of the currentUser key from localStorage. How should I g ...
Here is my situation: I am working with an image that is 1900 x 1600 pixels in size. I also have a div that is sized at 200 x 150 pixels. To adjust the image size, I used the following CSS: max-width:300px; max-height:300px; The height will be adjuste ...