我在ReactJs中创建了一个下拉菜单来选择国家代码。下拉列表由国家/地区代码和国家/地区名称组成。我希望下拉列表的宽度应该只等于国家/地区代码。
我已经给出宽度:选择元素的最大内容。
下面是同样的代码。我正在做的样式使用顺风CSS。
<div className="flex gap-6 flex-col mt-4 text-[#2c3345] font-semibold">
<label htmlFor="phone">
Phone Number <span className=" text-red-600">*</span>
</label>
<div className="flex gap-2 items-center text-[#2c3345] font-semibold">
<select
name="dropdown"
id="dropdown"
className="w-max-content py-2"
>
{countryCode.map((element, index) => (
<option key={index} value={element.code}>
{element.code} - {element.country}
</option>
))}
</select>
<input
type="tel"
name="phone"
id="phone"
required
onClick={() => selectHandler("phone")}
className={`bg-transparent outline-none border-b-2 ${
selectedLink === "phone"
? "border-[#4065fa]"
: "border-[#555959]"
} `}
/>
</div>
</div>
字符串
电流输出:-
And here is the current output
我希望下拉列表的宽度应该只等于国家代码的宽度。
所需输出:
Desired Output的
2条答案
按热度按时间e4yzc0pl1#
要根据所选国家代码更改下拉列表的宽度,您可以根据国家代码的长度动态调整选择元素的宽度。
字符串
guz6ccqo2#
由于dropdown(
select
)和input
组件的父元素都有flex
类,这意味着这两个子元素现在都是flex项。为了使下拉列表只占用所需的空间,可以让
input
元素占用flex容器中的所有可用空间,这可以通过在input
元素中添加grow
Tailwind(TW)类(相当于flex-grow: 1;
)来实现。我还建议在
select
元素的className
字段中添加shrink-0
TW类(相当于flex-shrink: 0;
),这将使下拉列表元素占用尽可能多的空间,但不允许它收缩更多,以便为input
元素腾出更多空间(在本例中不会在新行中断开)。最终,您的结构应该类似于以下内容:
字符串
联系方式:
grow
TailwindCSSshrink-0
TailwindCSS