Css 如何在供应主题中定位多货币下拉列表
我在“供应”主题中定位“多种货币形式”时遇到问题。 我以前在其他主题中也做过,但这次我不明白为什么要将下拉列表放在容器的左侧,我们需要将它放在右侧 这就是它的样子: 这是代码的相关部分: 我已经尝试添加了所有/许多justify项:end justify contents:end options,但我显然遗漏了一些关键/简单的内容 =============================================================过了一段时间================================== 嗯,我失踪了:Css 如何在供应主题中定位多货币下拉列表,css,grid,themes,shopify,Css,Grid,Themes,Shopify,我在“供应”主题中定位“多种货币形式”时遇到问题。 我以前在其他主题中也做过,但这次我不明白为什么要将下拉列表放在容器的左侧,我们需要将它放在右侧 这就是它的样子: 这是代码的相关部分: 我已经尝试添加了所有/许多justify项:end justify contents:end options,但我显然遗漏了一些关键/简单的内容 =============================================================过了一段时间==============
.shopify-currency-form {
display:inline-block;
}
但即便如此,在将其移动到正确位置时也存在问题
通过尝试和错误,我已经做到了这一点,但我不喜欢切换到绝对!!
/*增加了多种货币的形式*/
.shopify-currency-form {
margin-bottom:0;
display:inline-block;
}
select[name=currency] {
width:100px;
height: 43px; /* same as cart button */
margin-bottom:2px;
}
@media screen and ( max-width:768px ) { /* move form to bottom right of header */
.shopify-currency-form {
position: relative;
bottom: -16px;
float: right;
}
}
@media screen and ( max-width:480px ) { /* move form up to top right of header */
.shopify-currency-form {
position: absolute;
float: right;
top: 53px;
right: 5px;
}
}
非常感谢您的任何改进。在查看您的网站后,您需要做的唯一一件事就是将表单包装在一个div中。将货币下拉表单放在搜索表单之后。请参阅下面的代码
<div class="wrap">
<form action="/search" method="get" class="search-bar" role="search">
<input type="hidden" name="type" value="product">
<input type="search" name="q" value="" placeholder="Search all products..." aria-label="Search all products...">
<button type="submit" class="search-bar--submit icon-fallback-text">
<span class="icon icon-search" aria-hidden="true"></span>
<span class="fallback-text">Search</span>
</button>
</form>
<form method="post" action="/cart/update" id="currency_form" accept-charset="UTF-8" class="shopify-currency-form" enctype="multipart/form-data">
<input type="hidden" name="form_type" value="currency"><input type="hidden" name="utf8" value="✓"><input type="hidden" name="return_to" value="/">
<select name="currency">
<option value="CAD">CAD $</option>
<option value="EUR">EUR €</option>
<option value="GBP" selected="selected">GBP £</option>
<option value="USD">USD $</option>
</select>
</form>
</div>
搜寻
计算机辅助设计$
欧元
英镑
美元$
您能分享前端商店链接吗?这是您在哪里实现的。我现在也在尝试将货币表单放在响应导航栏中。非常感谢。如果没有包装纸,我们该怎么办;)