Question

我正在使用content psuedo-element的:after参数来显示一组单选按钮的文本。然而，这导致一切都重叠。

我想找到一种方法来添加一些填充或使用:after内容的边距，但不确定是否可能。

有没有办法根据前一个元素的content伪元素的:after参数来定位某些内容？

HTML

<form id="ValidateForm">
<label for="AgentId">Agent Id</label>
<input id="AgentId" name="AgentId" type="text" >
<label for="LOB">LOB</label>
<input id="Retirement" name="LOB" type="radio" value="R"> 
<input id="Life" name="LOB" type="radio" value="L"> 
<input id="Business" name="LOB" type="radio" value="B">     
<label for="SignDate">Application Sign Date</label>
<input data-val="true" data-val-date="The field Application Sign Date must be a date." id="SignDate" name="SignDate" type="text" value="">
<input type="button" value="Go">
</form>

CSS

    #ValidateForm{
        margin: 10px 10px 5px 0;
    }

    #ValidateForm label{
        font-weight: bold;
        float:left;
        clear:left;
        min-width:250px;
        margin:inherit; 
    }

    #ValidateForm label.required:after {
      content:"*";
      color:red;
    }

    #ValidateForm input{
        float:left;
        margin: inherit;
    }

    #ValidateForm .submission-attempted input:invalid { 
        background-color: #f9b2b2; 
        outline: none; 
    }

    #ValidateForm input[type=button]{
        clear:left;
    }

    #ValidateForm input[type=radio]:after {
        margin: 0 20px 0;
    }

    #ValidateForm input#Retirement:after {
        content:"Retirement";
    }

    #ValidateForm input#Life:after {
        content:"Life";
    }

    #ValidateForm input#Business:after {
        content:"Business";
    }

Answer 1

您需要在输入[type = radio]

设置宽度

#ValidateForm input[type=radio]{
    width: 80px !important;
}

或

#ValidateForm input[type=radio]{
    margin-right: 80px !important;
}

Answer 2

尝试为元素设置边距以创建enought place ...我认为：在内容引用（计算位置相对于）元素而不是DOM之后

位置元素基于：内容之后

2 个答案: