css - 如何正确定位单选按钮？

Question

http://jsfiddle.net/BD8j2/

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

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

这可能吗？让整个盒子成为链接？我正在考虑将整个 div 包装在一个<a href>我认为可行的方法中。

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 无效（inputinside a），并且不兼容跨浏览器，因此我已将其替换为 JavaScript 示例。）

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 需要将链接名称和目标放在两个数组中，现在我已经自动完成了。