I am new to Svelte and I absolutely love it, while designing the top-navigation bar for my project, I couldn't achieve the desired result because of Svelte's JS DOM Styling methods. Would be great if you guide me on this.
The markup is as follows
<div class="top-nav">
<div class="width-restriction">
<div id="hamburger-icon">
<HamburgerIcon /> <!-- Imported component, essentially an icon, doesn't affect styling; needs to be at the extreme left -->
</div>
<h1 class="head" id="logo">VKYD</h1> <!-- Logo; needs to be centered -->
<div id="shopping-cart-icon">
<ShoppingCartIcon /> <!-- Imported component, essentially an icon, doesn't affect styling; needs to be at the extreme right -->
</div>
</div>
</div>
You can easily achieve this using flexbox
on the .width-restriction
:
.width-restriction { display: flex; justify-content: space-between; align-items: center; }
<div class="top-nav"> <div class="width-restriction"> <div id="hamburger-icon"> icon-hamburger <!-- Imported component, essentially an icon, doesn't affect styling; needs to be at the extreme left --> </div> <h1 class="head" id="logo">VKYD</h1> <!-- Logo; needs to be centered --> <div id="shopping-cart-icon"> icon-shop <!-- Imported component, essentially an icon, doesn't affect styling; needs to be at the extreme right --> </div> </div> </div>
In Svelte, you need to define the styles in a style
tag just like that:
<style>
.width-restriction {
display: flex;
justify-content: space-between;
align-items: center;
}
</style>
<div class="top-nav">
<div class="width-restriction">
<div id="hamburger-icon">
icon-hamburger <!-- Imported component, essentially an icon, doesn't affect styling; needs to be at the extreme left -->
</div>
<h1 class="head" id="logo">VKYD</h1> <!-- Logo; needs to be centered -->
<div id="shopping-cart-icon">
icon-shop <!-- Imported component, essentially an icon, doesn't affect styling; needs to be at the extreme right -->
</div>
</div>
</div>
Check the REPL .
I am not familiar with Svelte but usually, that type of placement can be achieved quite easily using
display: flex;
justify-content: space-between;
You can check here for a quick demo of the property ( see bottom of the page): https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content
Hope this can help you!
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.