我怎样才能使单选框向任何方向移动@media - css

Question

我正在使用 wordpress，我的求职板上有复选框的 CSS 代码。我希望这些复选框在移动设备上向屏幕右侧移动。

原因：在 iPhone 上，我的复选框与其他内容重叠，我希望拉开距离。

单选复选框为的工作板：https://hughesjobs.net/jobs-3

**您会在我的工作板上看到复选框作为类别。

CSS代码：

 .wpjb input[type=checkbox],
 .wpjb input[type=radio] {
  display: inline;
  margin: 0;
  padding:0 ;
  box-sizing: border-box;
 -webkit-box-sizing: border-box;
 -moz-box-sizing: border-box;

}

Answer 1

根据你的描述，我不太明白你需要什么。但我建议将它们显示为等宽的列和行。

@media (max-width: 480px) { 

    #wpjb-top-search ul {
        padding-top: 10px;
    }

    #wpjb-top-search ul li {
        margin: 1% 0;
        float: left;
        width: 33.33%;
        word-spacing: normal;
    }

}

Answer 2

有些事情我会做不同的事情。
1. HTML：与其将所有内容都包装在 unordered list 中，不如将 inputs 包装在 labels 中？
2. CSS：然后允许您使用 label 作为 position:relative 父级，然后在 input

周围移动

CSS:        
label {
            /* nothing really, inline is fine for desktop */
        }
        label input[type=checkbox] {
            /* again, inline is fine on desktop */
        }
        @media (max-width:375px){
            /* iphone 6 */
            label {
                position:relative;
                padding-right: 50px; // <== makes space for the checkbox
            }
            label input[type=checkbox] {
                /* position the checkbox to the right, with a little space on top to line up with the text. */
                position:absolute;
                right:0;
                top:3px;
            }
        }  
HTML:  
    <label for="wpjb-search-38"><input type="checkbox" class="wpjb-ls-type" name="type[]" value="38" id="wpjb-search-38"> Contractor</label>
    <label for="wpjb-search-5"><input type="checkbox" class="wpjb-ls-type" name="type[]" value="5" id="wpjb-search-5"> Freelance</label>
    <label for="wpjb-search-3"><input type="checkbox" class="wpjb-ls-type" name="type[]" value="3" id="wpjb-search-3"> Full-time</label>
    ...

我怎样才能使单选框向任何方向移动@media - css

How can I make radio check box's move in any direction @media - css

html

css

wordpress

jquery

media-queries