Question

我想知道是否有办法将复选框移到标签的右侧？默认情况下，它始终在左侧。我怎样才能将它移到右边？

<style>
input[type=checkbox].css-checkbox {
    position:absolute;
    z-index:-1000;
    left:-1000px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    height:1px;
    width:1px;
    margin:-1px;
    padding:0;
    border:0;
}
input[type=checkbox].css-checkbox + label.css-label {
    height: 28px;
    display: inline-block;
    line-height: 28px;
    background-repeat: no-repeat;
    cursor: pointer;
}
input[type=checkbox].css-checkbox:checked + label.css-label {
    background-position: 0 -28px;
}
label.css-label {
    background-image: url(wp-content/uploads/2017/02/cb.png);
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
</style>

HTML

<input type="checkbox" id="checkboxG1" class="css-checkbox" />
<label for="checkboxG1" class="css-label">TEXT</label>

Answer 1

是否有理由不能在HTML中交换标签和输入？

<label for="checkboxG1" class="css-label">TEXT</label>
<input type="checkbox" id="checkboxG1" class="css-checkbox" />

Answer 2

使用花车怎么样？

div.wrapper { float:left;}
div.wrapper label { float: left; width: 75%; text-align: right; }
div.wrapper span { float: right; width: 20%; text-align: left; }
div.clearboth { clear: both }

<div class="wrapper">
      <label for="myCheckBox">TEXT</label>
      <span><input name="myCheckBox" id="myCheckBox" type="checkbox" /></span>
      <div class="clearboth"></div>
</div>

Answer 3

在输入上设置<div> <input type="checkbox" id="checkboxG1" class="css-checkbox" /> <label for="checkboxG1" class="css-label">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</label> </div>。例如这个HTML：

div{width: 300px;}
.css-checkbox {float: right;}
.css-label {display: block; text-align: right;}

使用这个CSS：

from __future__ import print_function
import httplib2
import os

from apiclient import discovery
from oauth2client import client
from oauth2client import tools
from oauth2client.file import Storage

import datetime

try:
    import argparse
    flags = argparse.ArgumentParser(parents=[tools.argparser]).parse_args()
except ImportError:
    flags = None

# If modifying these scopes, delete your previously saved credentials
# at ~/.credentials/calendar-python-quickstart.json
SCOPES = 'https://www.googleapis.com/auth/calendar.readonly'
CLIENT_SECRET_FILE = 'client_secret.json'
APPLICATION_NAME = 'Google Calendar API Python Quickstart'


def get_credentials():
    """Gets valid user credentials from storage.

    If nothing has been stored, or if the stored credentials are invalid,
    the OAuth2 flow is completed to obtain the new credentials.

    Returns:
        Credentials, the obtained credential.
    """
    home_dir = os.path.expanduser('~')
    credential_dir = os.path.join(home_dir, '.credentials')
    if not os.path.exists(credential_dir):
        os.makedirs(credential_dir)
    credential_path = os.path.join(credential_dir, 'calendar-python-quickstart.json')

    store = Storage(credential_path)
    credentials = store.get()
    if not credentials or credentials.invalid:
        flow = client.flow_from_clientsecrets(CLIENT_SECRET_FILE, SCOPES)
        flow.user_agent = APPLICATION_NAME
        if flags:
            credentials = tools.run_flow(flow, store, flags)
        else: # Needed only for compatibility with Python 2.6
            credentials = tools.run(flow, store)
        print('Storing credentials to ' + credential_path)
    return credentials

def main():
    """Shows basic usage of the Google Calendar API.

    Creates a Google Calendar API service object and outputs a list of the next
    10 events on the user's calendar.
    """
    credentials = get_credentials()
    http = credentials.authorize(httplib2.Http())
    service = discovery.build('calendar', 'v3', http=http)

    now = datetime.datetime.utcnow().isoformat() + 'Z' # 'Z' indicates UTC time
    print('Getting the upcoming 10 events')
    eventsResult = service.events().list(
        calendarId='primary', timeMin=now, maxResults=10, singleEvents=True,
        orderBy='startTime').execute()
    events = eventsResult.get('items', [])

    if not events:
        print('No upcoming events found.')
    for event in events:
        start = event['start'].get('dateTime', event['start'].get('date'))
        print(start, event['summary'])
    event = {
        'summary': 'Google I/O 2015',
        'location': '800 Howard St., San Francisco, CA 94103',
        'description': 'A chance to hear more about Google\'s developer products.',
        'start': {
            'dateTime': '2017-03-24T09:00:00-07:00',
            'timeZone': 'America/Los_Angeles',
        },
        'end': {
            'dateTime': '2017-03-24T17:00:00-07:00',
            'timeZone': 'America/Los_Angeles',
        },
        'recurrence': [
            'RRULE:FREQ=DAILY;COUNT=2'
        ],
        'attendees': [
            {'email': 'lpage@example.com'},
            {'email': 'sbrin@example.com'},
        ],
        'reminders': {
            'useDefault': False,
            'overrides': [
                {'method': 'email', 'minutes': 24 * 60},
                {'method': 'popup', 'minutes': 10},
            ],
        },
    }

    event = service.events().insert(calendarId='primary', body=event).execute()
    print('Event created: %s' % (event.get('htmlLink')))

if __name__ == '__main__':
    main()

请参阅：http://codepen.io/anon/pen/WpJPoK

Answer 4

使用

direction:rtl;

你可以通过将复选框浮动到右边然后将标签浮动到左边来单独执行它，或者只用右边的填充 - 右边距或边距向左浮动它们，两者都有效！

标签右侧的复选框

4 个答案: