Question

我无法找出为什么我无法在中心对齐追随者。这些类不包括指定位置，除了.c类和专用容器div（CSS中没有）外，它们仅影响数量部分，但应将所有内容对齐此div的中心。我用AngularJs编写，所以也许还有另一种方法可以更好地对齐所有内容？也许与框对齐？还是与标签/跨度有关？

#spread {
  background-color: #0BD44A;
  padding: 15px;
  margin: 15px;
  border-radius: 8px;
}

.c {
  display: block;
  position: relative;
  padding-left: 35px;
  margin-bottom: 12px;
  cursor: pointer;
  font-size: 22px;
}


/* Hide the browser's default radio button */

.c input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
}


/* Create a custom radio button */

.checkmark {
  position: absolute;
  top: 0;
  left: 0;
  height: 25px;
  width: 25px;
  background-color: #BEBEBE;
  border-radius: 8px;
}


/* On mouse-over, add a grey background color */

.c:hover input~.checkmark {
  background-color: #F5F5F5;
}


/* When the radio button is checked, add a blue background */

.c input:checked~.checkmark {
  background-color: white;
}

<div id="spread">
    <h1>Spread</h1>
    <div class="container" align=center>
        <h2>Answer following questions and find out how to diversify your capital:</h2>
        <label for="amount">
            <br>
            <h4>Amount you plan to invest:</h4>
            <input type="number" class="form-control" id="amount" style="text-align:center" placeholder="250.00$">
        </label>
        <hr>
        <h4>Time-period:</h4>
        <h5>
            <label class="c">short
                <input type="radio" name="radiotime" value="1">
                <span class="checkmark"></span>
            </label>
            <label class="c">medium
                <input type="radio" name="radiotime" value="2">
                <span class="checkmark"></span>
            </label>
            <label class="c">long
                <input type="radio" name="radiotime" value="3">
                <span class="checkmark"></span>
            </label>
        </h5>
        <hr>
        <h4>Risk-level:</h4>
        <h5>
            <label class="c">high
                <input type="radio" name="radiorisk" value="1">
                <span class="checkmark"></span>
            </label>
            <label class="c">medium
                <input type="radio" name="radiorisk" value="2">
                <span class="checkmark"></span>
            </label>
            <label class="c">low
                <input type="radio" name="radiorisk" value="3">
                <span class="checkmark"></span>
            </label>
        </h5>
        <app-chart></app-chart>
    </div>
</div>

**

Answer 1

一种方法是在单选按钮之间添加中断，并将其显示从block更改为inline。

添加了红色背景色以突出显示。

例如：

#spread {
  background-color: #0BD44A;
  padding: 15px;
  margin: 15px;
  border-radius: 8px;
}

.c {
  position: relative;
  padding-left: 35px;
  margin-bottom: 12px;
  cursor: pointer;
  font-size: 22px;
  
}

.inlineRed {
  display: inline;
  background-color: red;
}

/* Hide the browser's default radio button */

.c input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
}

/* Create a custom radio button */

.checkmark {
  position: absolute;
  top: 0;
  left: 0;
  height: 25px;
  width: 25px;
  background-color: #BEBEBE;
  border-radius: 8px;
}

/* On mouse-over, add a grey background color */

.c:hover input~.checkmark {
  background-color: #F5F5F5;
}

/* When the radio button is checked, add a blue background */

.c input:checked~.checkmark {
  background-color: white;
}

<div id="spread">

  <h1>Spread</h1>

  <div class="container" align=center>

    <h4>Risk-level:</h4>

    <h5>
      <label class="c inlineRed">high
        <input type="radio" name="radiorisk" value="1">
        <span class="checkmark"></span>
      </label>
      <br>
      <label class="c inlineRed">medium
        <input type="radio" name="radiorisk" value="2">
        <span class="checkmark"></span>
      </label>
      <br>
      <label class="c inlineRed">low
        <input type="radio" name="radiorisk" value="3">
        <span class="checkmark"></span>
      </label>
    </h5>

    <app-chart></app-chart>

  </div>

</div>

另一种实现此目的的方法是再次在单选按钮之间包含br标签，并为包装单选按钮的元素（在本例中为h5）添加样式。使该样式左对齐，然后声明其宽度，并向元素添加padding-left。

示例，以蓝色边框为重点：

#spread {
  background-color: #0BD44A;
  padding: 15px;
  margin: 15px;
  border-radius: 8px;
}

.blue-border {
  border: 3px solid blue;
  text-align: left;
  width: 50%;
  padding-left: 25%;
}

.c {
  position: relative;
  padding-left: 35px;
  margin-bottom: 12px;
  cursor: pointer;
  font-size: 22px;
}

/* Hide the browser's default radio button */

.c input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
}

/* Create a custom radio button */

.checkmark {
  position: absolute;
  top: 0;
  left: 0;
  height: 25px;
  width: 25px;
  background-color: #BEBEBE;
  border-radius: 8px;
}

/* On mouse-over, add a grey background color */

.c:hover input~.checkmark {
  background-color: #F5F5F5;
}

/* When the radio button is checked, add a blue background */

.c input:checked~.checkmark {
  background-color: white;
}

<div id="spread">

  <h1>Spread</h1>

  <div class="container" align=center>

    <h4>Risk-level:</h4>

    <h5 class="blue-border">
      <label class="c inlineRed">high
        <input type="radio" name="radiorisk" value="1">
        <span class="checkmark"></span>
      </label>
      <br>
      <label class="c inlineRed">medium
        <input type="radio" name="radiorisk" value="2">
        <span class="checkmark"></span>
      </label>
      <br>
      <label class="c inlineRed">low
        <input type="radio" name="radiorisk" value="3">
        <span class="checkmark"></span>
      </label>
    </h5>

    <app-chart></app-chart>

  </div>

</div>

将收音机与自定义收音机对准

1 个答案: