Eliminate a gap from inline and inline-block

Developer
Toshiyuki TAKAHASHI
Size
2,345 Kb
Views
16,192
  1. Eliminate a gap from inline and inline-block Previews
  2. Eliminate a gap from inline and inline-block HTML Codes
  3. Eliminate a gap from inline and inline-block CSS Codes
  4. Eliminate a gap from inline and inline-block JS Codes

How do I make an eliminate a gap from inline and inline-block?

What is a eliminate a gap from inline and inline-block? How do you make a eliminate a gap from inline and inline-block? This script and codes were developed by Toshiyuki TAKAHASHI on 30 September 2022, Friday.

Eliminate a gap from inline and inline-block Previews
IQ Test

Eliminate a gap from inline and inline-block - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>eliminate a gap from inline and inline-block</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <h1>正規表現でタグの隙間を埋める</h1>
<h2>置き換えなし（inline）</h2>
<ul class=""> <li><a href="#">TEST1</a></li><li><a href="#">TEST2</a></li> <li><a href="#">TEST3(&gt; &lt;)</a></li>
</ul>
<h2>置き換えなし（inline-block）</h2>
<ul class="box"> <li><a href="#">A</a></li><!-- --><li><a href="#">B</a></li> <li><a href="#">C</a></li>
</ul>
<h2>置き換えあり（inline）</h2>
<ul class="fixedGap"> <li><a href="#">TEST1</a></li> <li><a href="#">TEST2</a></li> <li><a href="#">TEST3(&gt; &lt;)</a></li>
</ul>
<h2>置き換えあり（inline-block）</h2>
<ul class="fixedGap box"> <li><a href="#">A</a></li> <li><a href="#">B</a></li> <li><a href="#">C</a></li>
</ul> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Eliminate a gap from inline and inline-block - Script Codes CSS Codes

* { font-size: 16px; padding: 0; margin: 0;
}
body { padding: 3em;
}
h1 { text-align: center;
}
h2 { text-align: center; background: #eee; font-weight: normal; padding: 0.5em;
}
ul, li, p { margin: 0; padding: 0;
}
ul, li { list-style: none;
}
ul { margin-bottom: 3em; text-align: center;
}
li { display: inline;
}
.box li { display: inline-block; padding: 1em 2em; background: #aaa;
}

Eliminate a gap from inline and inline-block - Script Codes JS Codes

$(function() { $(".fixedGap").each(function(){ $(this).html($(this).html().replace(/>\s+</g, '><')); });
});
Eliminate a gap from inline and inline-block - Script Codes
Eliminate a gap from inline and inline-block - Script Codes
Home Page Home
Developer Toshiyuki TAKAHASHI
Username gau
Uploaded September 30, 2022
Rating 3
Size 2,345 Kb
Views 16,192
Do you need developer help for Eliminate a gap from inline and inline-block?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Toshiyuki TAKAHASHI (gau) Script Codes
Name
Off-registration button
Bxslider hover test
Vue.js and Responsive
Long Shadow Text
Screen effect
Chat bubble
Digital Clock with Vue.js
SVG Stroke Animation
No nest max-width
Gau9000
Create amazing sales emails with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!