我無法更改位置并在html中的選擇標簽之間添加空格-有解無憂

在此處輸入影像描述

<div class="selection_menu">
    <select name="Island" id="select_island" class="select_island">
        <option value="1">Island</option>
        <option value="2">West Java</option>
        <option value="3">Sumatra</option>
        <option value="4">Bali Pupuan</option>
    </select>
    
    

    <select name="type" id="select_type"  class="select_type">
        <option value="1">Type</option>
        <option value="2">Arabica</option>
        <option value="3">Robusta</option>

    </select>

    <select  name="process_method" id="select_process" class="select_process">
        <option value="1">Process Method</option>
        <option value="2">Natural</option>
        <option value="3">Honey</option>
        <option value="4">Dry Hulled</option>
        <option value="5">Wet Hulled</option>
        <option value="6">Extended Natural</option>
        <option value="7">Full Wash</option>
    </select>

    <select name="select_quality" id="select_quality" class="select_quality">
        <option value="1">Quality</option>
        <option value="2">Specialty</option>
        <option value="3">Premium</option>

    </select>

    <select name="select_available" id="select_available" class="select_available">
        <option value="1">Availability</option>
        <option value="2">Available now</option>
        <option value="3">Not yet available</option>
    </select>
    

   <select name="select_cp" id="select_cp" class="select_cp">
       <option value="1">Cupping score</option>
       <option value="2">80-85</option>
       <option value="3">85.1-90</option>
   </select>

我的選擇標簽在一個 div 中，我嘗試了：align-items：center，justify-content：center，justify-content：space-between。但它根本不起作用。如何使它們居中并在它們之間添加均勻的空格？

如何在它們之間放置均勻的空格并將它們放在我的 div 中？

uj5u.com熱心網友回復：

首先你不需要使用 flexbox 系統。表單元素是行內元素，您可以使用 text-align: center。但我不了解你的整個 CSS，我使用 flexbox 撰寫示例。

僅將此添加到您的CSS：

    .selection_menu {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 40px;  
    }

    .select_island {
      display: block;
    }

使用 gap 可以增加或減少元素之間的空間。

.selection_menu {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 40px;  
}

.select_island {
  display: block;
}

<div class="selection_menu">
    <select name="Island" id="select_island" class="select_island">
        <option value="1">Island</option>
        <option value="2">West Java</option>
        <option value="3">Sumatra</option>
        <option value="4">Bali Pupuan</option>
    </select>
    
    

    <select name="type" id="select_type"  class="select_type">
        <option value="1">Type</option>
        <option value="2">Arabica</option>
        <option value="3">Robusta</option>

    </select>

    <select  name="process_method" id="select_process" class="select_process">
        <option value="1">Process Method</option>
        <option value="2">Natural</option>
        <option value="3">Honey</option>
        <option value="4">Dry Hulled</option>
        <option value="5">Wet Hulled</option>
        <option value="6">Extended Natural</option>
        <option value="7">Full Wash</option>
    </select>

    <select name="select_quality" id="select_quality" class="select_quality">
        <option value="1">Quality</option>
        <option value="2">Specialty</option>
        <option value="3">Premium</option>

    </select>

    <select name="select_available" id="select_available" class="select_available">
        <option value="1">Availability</option>
        <option value="2">Available now</option>
        <option value="3">Not yet available</option>
    </select>
    

   <select name="select_cp" id="select_cp" class="select_cp">
       <option value="1">Cupping score</option>
       <option value="2">80-85</option>
       <option value="3">85.1-90</option>
   </select>

uj5u.com熱心網友回復：

如果您的標簽選擇選單是彈性容器

你可以玩justify-content有價值的財產space-between或space-evenly

.selection_menu {
  width:100%;
  border:solid 1px black;
  display:flex;
  justify-content:space-between;
}

<div class="selection_menu">
    <select name="Island" id="select_island" class="select_island">
        <option value="1">Island</option>
        <option value="2">West Java</option>
        <option value="3">Sumatra</option>
        <option value="4">Bali Pupuan</option>
    </select>
    
    

    <select name="type" id="select_type"  class="select_type">
        <option value="1">Type</option>
        <option value="2">Arabica</option>
        <option value="3">Robusta</option>

    </select>

    <select  name="process_method" id="select_process" class="select_process">
        <option value="1">Process Method</option>
        <option value="2">Natural</option>
        <option value="3">Honey</option>
        <option value="4">Dry Hulled</option>
        <option value="5">Wet Hulled</option>
        <option value="6">Extended Natural</option>
        <option value="7">Full Wash</option>
    </select>

    <select name="select_quality" id="select_quality" class="select_quality">
        <option value="1">Quality</option>
        <option value="2">Specialty</option>
        <option value="3">Premium</option>

    </select>

    <select name="select_available" id="select_available" class="select_available">
        <option value="1">Availability</option>
        <option value="2">Available now</option>
        <option value="3">Not yet available</option>
    </select>
    

   <select name="select_cp" id="select_cp" class="select_cp">
       <option value="1">Cupping score</option>
       <option value="2">80-85</option>
       <option value="3">85.1-90</option>
   </select>
 </div>

uj5u.com熱心網友回復：

添加 flexbox with display:flex;thanjustify-content:center;用于水平對齊以使所有元素居中，而不是column-gap: 5rem;在列之間創建空間

.selection_menu {
  margin: 1rem;
  display: flex;
  justify-content: center;
  align-items: center;

  /* CHANGE HERE */
  column-gap: 5rem;
  /* CHANGE HERE */
}

<div class="selection_menu">
        <select name="Island" id="select_island" class="select_island">
            <option value="1">Island</option>
            <option value="2">West Java</option>
            <option value="3">Sumatra</option>
            <option value="4">Bali Pupuan</option>
        </select>
        <select name="type" id="select_type"  class="select_type">
            <option value="1">Type</option>
            <option value="2">Arabica</option>
            <option value="3">Robusta</option>
        </select>
    
        <select  name="process_method" id="select_process" class="select_process">
            <option value="1">Process Method</option>
            <option value="2">Natural</option>
            <option value="3">Honey</option>
            <option value="4">Dry Hulled</option>
            <option value="5">Wet Hulled</option>
            <option value="6">Extended Natural</option>
            <option value="7">Full Wash</option>
        </select>
    
        <select name="select_quality" id="select_quality" class="select_quality">
            <option value="1">Quality</option>
            <option value="2">Specialty</option>
            <option value="3">Premium</option>
    
        </select>
    
        <select name="select_available" id="select_available" class="select_available">
            <option value="1">Availability</option>
            <option value="2">Available now</option>
            <option value="3">Not yet available</option>
        </select>
        
    
       <select name="select_cp" id="select_cp" class="select_cp">
           <option value="1">Cupping score</option>
           <option value="2">80-85</option>
           <option value="3">85.1-90</option>
       </select>

轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/443711.html

標籤：html css

上一篇：在懸停時從左側而不是右側添加寬度

下一篇：我需要如何使用尾風樣式？