1

Eu queria deixar todos os itens dentro da "Classe;" centralizados certinhos e justificados, com 3 itens na mesma linha.

https://jsfiddle.net/kaumikaze/pru0agw5/9/

input {
    width: 4.5rem;
}

.div-status {
    background: #00000000;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-around;
    align-content: center;
}

.div-classes {
    display: flex;
    flex-wrap: wrap;
    overflow: hidden;
    max-width: 60ch;
    text-align: inherit;
}
<div class="div-classes">

<fieldset>

<legend>Classes;</legend>

<label>
  <input type="radio" name="classes" value="Alquimista">
    Alquimista</input>
</label>
                        
<label>
  <input type="radio" name="classes" value="Assassino">
    Assassino</input>
</label>
                        
<label>
  <input type="radio" name="classes" value="Berserker">
    Berserker</input>
</label>
                        
<label>
  <input type="radio" name="classes" value="Cacador">
    Caçador</input>
</label>
                        
<label>
  <input type="radio" name="classes" value="Clerigo">
  Clérigo</input>
</label>
           
<label>
  <input type="radio" name="classes" value="Duelista">
  Duelista</input>
</label>
                     
<label>
  <input type="radio" name="classes" value="Feiticeiro">
  Feiticeiro</input>
</label>
                      
<label>
  <input type="radio" name="classes" value="Guardiao">
  Guardião</input>
</label>
                            
<label>
  <input type="radio" name="classes" value="Guerreiro">
  Guerreiro</input>
</label>
                     
<label>
  <input type="radio" name="classes" value="Lutador">
  Lutador</input>
</label>
                    
<label>
  <input type="radio" name="classes" value="Menestrel">
  Menestrel</input>
</label>
                      
<label>
  <input type="radio" name="classes" value="Paladino">
  Paladino</input>
</label>
                        
<label>
  <input type="radio" name="classes" checked="checked" value="Samurai">
  Samurai</input>
</label>
                        
</fieldset>

</div>

1 Resposta 1

3

Vc tem que tirar esse width do input, alem disse input não precisa da tag de fechamento </input>

Depois vc coloca o width na label que o input está dentro, e faz um calc() para caberem 3 por linha.

Segue um exemplo aproveitando seu código, e fazendo ajustes simples no CSS.

label {
  display: inline-block;
  width: calc(100% / 3 - 1em);
}

fieldset {
  padding: 0.5em;
}

.div-status {
  background: #00000000;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-around;
  align-content: center;
}

.div-classes {
  display: flex;
  flex-wrap: wrap;
  overflow: hidden;
  max-width: 60ch;
  text-align: inherit;
}
<div class="div-classes">

  <fieldset>

    <legend>Classes;</legend>

    <label>
      <input type="radio" name="classes" value="Alquimista">
      Alquimista
    </label>

    <label>
      <input type="radio" name="classes" value="Assassino">
      Assassino
    </label>

    <label>
      <input type="radio" name="classes" value="Berserker">
      Berserker
    </label>

    <label>
      <input type="radio" name="classes" value="Cacador">
      Caçador
    </label>

    <label>
      <input type="radio" name="classes" value="Clerigo">
      Clérigo
    </label>

    <label>
      <input type="radio" name="classes" value="Duelista">
      Duelista
    </label>

    <label>
      <input type="radio" name="classes" value="Feiticeiro">
      Feiticeiro
    </label>

    <label>
      <input type="radio" name="classes" value="Guardiao">
      Guardião
    </label>

    <label>
      <input type="radio" name="classes" value="Guerreiro">
      Guerreiro
    </label>

    <label>
      <input type="radio" name="classes" value="Lutador">
      Lutador
    </label>

    <label>
      <input type="radio" name="classes" value="Menestrel">
      Menestrel
    </label>

    <label>
      <input type="radio" name="classes" value="Paladino">
      Paladino
    </label>

    <label>
      <input type="radio" name="classes" checked="checked" value="Samurai">
      Samurai
    </label>

  </fieldset>

</div>

Você deve fazer log-in para responder a esta pergunta.