[英]How do i get this container to align right?
I want to get these elements to move over to the right.我想让这些元素向右移动。 The name is in the correct spot I just want the 4 elements to the right to move over with some slight padding on the outside.
名称在正确的位置,我只希望右侧的 4 个元素移动,并在外部稍微填充。 Thanks.
谢谢。
here is the code snippet:这是代码片段:
<!-- Header/top nav bar -->
<header class="py-6">
<nav class="container flex justify-between items-center mx-auto px-8 md:px-14 lg:px-10 w-full">
<div class="me-auto text-lg font-bold"> Jordan DeGiacomo </div>
<button class="hidden" id="hamburger">
<svg width="26" height="18" viewBox="0 0 26 18" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M13 17.5H0.25V14.6667H13V17.5ZM25.75 10.4167H0.25V7.58333H25.75V10.4167ZM25.75 3.33333H13V0.5H25.75V3.33333Z" fill="white"/></svg>
</button>
<ul class="hidden md:flex space-x-12 items-center" id="nav-ul">
<li><a href="#" class="text-selected-text">Home</a></li>
<li><a href="#languages">Languages</a></li>
<li><a href="#projects">Projects</a></li>
<li><a href="#hire"><button class="px-6 py-2 bg-theme font-bold"> Hire Me </button></a></li>
</ul>
<a href="#hire"><button class="px-4 py-1 font-bold bg-theme md:hidden"> Hire Me </button></a>
<!-- <div class="md:hidden">
<svg width="26" height="18" viewBox="0 0 26 18" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M13 17.5H0.25V14.6667H13V17.5ZM25.75 10.4167H0.25V7.58333H25.75V10.4167ZM25.75 3.33333H13V0.5H25.75V3.33333Z" fill="white"/></svg>
</div> -->
</nav>
<!-- side nav bar -->
<div class="container mt-16 flex justify-between items-center mx-auto px-8 md:px-14 lg:px-10 w-full">
<div class="flex flex-wrap md:flex-nowrap">
<nav class="inline-block lg:mr-24 lg:w-4 fixed left-percentage hidden xl:block">
<div class="absolute left-50 transform -translate-x-1/2 space-y-6 mt-36">
<a href="#" class="nav-dot selected-circle block w-7 h-7 rounded-full border-4 border-nav bg-body">
<span class="bg-black px-2 py-1 rounded-md ml-10 opacity-0">Home</span>
</a>
<a href="#languages" class="nav-dot block w-7 h-7 rounded-full border-4 border-nav bg-body">
<span class="bg-black px-2 py-1 rounded-md ml-10 opacity-0">Languaages</span>
</a>
<a href="#projects" class="nav-dot block w-7 h-7 rounded-full border-4 border-nav bg-body">
<span class="bg-black px-2 py-1 rounded-md ml-10 opacity-0">Projects</span>
</a>
<a href="#hire" class="nav-dot block w-7 h-7 rounded-full border-4 border-nav bg-body">
<span class="bg-black px-2 py-1 rounded-md ml-10 opacity-0">Hire</span>
</a>
</nav>
Since you already have the justify-between
just wrap the stuff you want moved to the right inside a div as follows:由于您已经有了
justify-between
只需将要移动到右侧的内容包装在 div 中,如下所示:
<nav class="container flex justify-between items-center mx-auto px-8 md:px-14 lg:px-10 w-full">
<!-- left side div -->
<div class="me-auto text-lg font-bold"> Jordan DeGiacomo </div>
<!-- right side div -->
<div>
<button class="hidden" id="hamburger">
<svg width="26" height="18" viewBox="0 0 26 18" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M13 17.5H0.25V14.6667H13V17.5ZM25.75 10.4167H0.25V7.58333H25.75V10.4167ZM25.75 3.33333H13V0.5H25.75V3.33333Z"
fill="white" />
</svg>
</button>
<ul class="hidden md:flex space-x-12 items-center" id="nav-ul">
<li><a href="#" class="text-selected-text">Home</a></li>
<li><a href="#languages">Languages</a></li>
<li><a href="#projects">Projects</a></li>
<li><a href="#hire"><button class="px-6 py-2 bg-theme font-bold"> Hire Me </button></a></li>
</ul>
<a href="#hire"><button class="px-4 py-1 font-bold bg-theme md:hidden"> Hire Me </button></a>
</div>
</nav>
Try using CSS to style the element -尝试使用 CSS 来设置元素的样式 -
/* for float alignment */
element {
float: right;
}
Or for absolute positioning或用于绝对定位
element {
position: absolute;
right: 0;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.