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

2 个答案: