Question

我试图在箭头图片的右侧放置一个单选按钮，但由于某种原因它总是在其他地方继续。我想要它在箭头和Masculino这个词之间。

我也不希望这个按钮真正记录任何东西，它只是出于审美目的。但是，当有人点击此框以填充单选按钮然后链接到另一个页面时，我想要。

这可能吗？整个盒子是链接？我想把<a href>中的整个div包围起来，我觉得它会起作用。

Answer 1

像http://jsfiddle.net/XEk5d/2/之类的东西，点击转到另一个页面的部分需要JavaScript。

CSS

#answers {
    width:220px;
    height:50px;
    background-color:#DDDDDD;
    border-top:1px solid black;
    border-bottom:1px solid black;
    margin-top:20px;
}

#arrowcenter {
    width:71px;
    height:31px;
    background-image:url('http://fortmovies.com/brazil/arrow.png');
    background-position:0 50%;
    background-repeat:no-repeat;
    height:100%;
    display:inline-block; 
    vertical-align:middle;
} 

#answerstext {
    background-position:0 50%;
    display:inline-block; 
    vertical-align:middle;
}
form{
    display:inline-block;
}
input{
    vertical-align:middle;
}

HTML

<div id="answers">
    <div id="arrowcenter"></div>
    <form>
        <input type="radio" name="sex" value="male" />
        <div id="answerstext">Masculino</div>
    </form>
</div><!-- end grayAnswer -->?

Answer 2

试试这个：http://jsfiddle.net/BD8j2/8/。

（此帖子的第一个版本中的HTML无效（input内a），并且它不是跨浏览器兼容的，因此我将其替换为JavaScript示例。）< / p>

<强> HTML：

<div class="answers">
    <form>
        <label class="links">
            <input type="radio" name="sex" value="male" />
            <a href="http://w3.org">Masculino</a>
        </label>
    </form>
</div>
<div class="answers">
    <form>
        <label class="links">
            <input type="radio" name="sex" value="female" />
            <a href="http://w3.org">Femenino</a>
        </label>
    </form>
</div>

<强> JavaScript的：

function init() {
    var link_elems = getElementsByClass('links');
    for(var i = 0; i < link_elems.length; i++) {
        addEvent(link_elems[i], 'click', goToLink);
    }
}
function goToLink(e) {
    if(e.stopPropagation) {
        e.stopPropagation();
    } else if(typeof e.cancelBubble != 'undefined') {
        e.cancelBubble();
    }
    e.currentTarget.children[0].checked = true;
    window.location = e.currentTarget.children[1].href;
}
function addEvent(elem, event, handler) {
    if(elem.addEventListener) {
        elem.addEventListener(event, handler, false);
    } else if(elem.attachEvent) {
        elem.attachEvent('on' + event, handler);
    } else {
        elem['on' + event] = handler;
    }
}
function getElementsByClass(className) {
    if(document.getElementsByClassName) {
        return document.getElementsByClassName(className);
    } else if(document.all) {
        var everything = document.all;
        var all_length = everything.length;
        var matches = [];
        for (var i = 0; i < all_length; i++) {
            if(everything[i].className == className) {
                matches[matches.length] = everything[i];
            }
        }
        return matches;
    }
    return false;
}
addEvent(window, 'load', init);

<强> CSS：

.answers {
    width: 220px;
    height: 50px;
    margin-top: 20px;
    border-top: 1px solid black;
    border-bottom: 1px solid black;
    background-color: #ddd;
    background-image: url('http://fortmovies.com/brazil/arrow.png');
    background-repeat: no-repeat;
    background-position: 0 50%;
}
.answers label {
    float: left;
    margin-left: 75px;
    padding-top: 15px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 16px;
    font-weight: bold
}
.answers input {
    margin-right: 5px
}

在之前的版本中，JavaScript需要将链接名称和目标放在两个数组中，现在我已将其设置为自动。

如何正确放置单选按钮？

2 个答案: