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 は無効 (input内部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 はリンク名とターゲットを 2 つの配列に配置する必要がありましたが、自動化しました。