标签略低于文字输入

时间:2018-10-28 10:35:06

标签: html css

我在文本输入的左侧有一个标签,但看起来文本略低于输入底部。这是我相关的HTML:

  <div id="nickbox">
    <label for="nickname" id="nicklabel">Nickname:</label>
    <input type="text" id="nickname" value="" maxlength="20" size="20" role="textbox"
        aria-label="Enter your nickname." data-lpignore="true" autofocus />
    <input type="button" id="nicknameconfirm" value="Set" />
  </div>

还有我的CSS:

#nickbox {
  border: none;
  display: inline;
  padding: 5px;
  background-color: #ffffff00;
  align-self:center;
  font-size: 2em;
}
#nickname {
  background-color: #44475a;
  border: none;
  height: 2em;
  width: 20em;
  outline: none;
}

This is what the results look like.我该怎么做才能改变呢?我假设我需要向#nicklabel添加一些CSS。谢谢。

3 个答案:

答案 0 :(得分:0)

containers: - args: - --address - unix:///sock/mixer.socket - --configStoreURL=k8s:// - --configDefaultNamespace=istio-system - --trace_zipkin_url=http://zipkin:9411/api/v1/spans image: anjia0532/istio-release.mixer:master-latest-daily imagePullPolicy: IfNotPresent livenessProbe: failureThreshold: 3 httpGet: path: /version port: 9093 scheme: HTTP initialDelaySeconds: 5 periodSeconds: 5 successThreshold: 1 timeoutSeconds: 1 name: mixer ports: - containerPort: 9093 protocol: TCP - containerPort: 42422 protocol: TCP resources: requests: cpu: 10m 放入vertical-align: middle;

#nickname

http://jsfiddle.net/6xqgb0mu/

答案 1 :(得分:0)

那呢?

#nickbox {
  display: flex; /* Change display on parent */
  border: none;
  padding: 5px;
  background-color: #fff;
  font-size: 2em;
}
#nickname {
  background-color: #44475a;
  border: none;
  height: 2em;
  width: 20em;
  outline: none;
  align-self: center; /* Apply to child */
}

答案 2 :(得分:0)

使用位置:粘性;就像这里:jsfiddle

var CommonFunctions = {
    GetJSON: (whichOne, self) => {
        $.ajax({
            type: "GET",
            url: "../Scripts/" + whichOne + "JSON.json",
            dataType: "json",
            contentType: "application/json; charset=utf-8",
            success: function (data) {
                self.persons = data
                return data;
            }
        });
    }
}