質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

89.13%

inputタグが文字の隣に来ないものがある

解決済

回答 3

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 279

yyymmm

score 27

labelの中にinputタグをいくつか使用していますが、
基本的に文字の隣にくるものだと思っていました。しかし、
なぜか隣にこないものがあります。
(画像参照ください。「規約に同意します」の左に、チェックボックスくるようにしたいのですが、
上に来てしまいます・・・)
イメージ説明

 <section>
            <h1>CONTACT</h1>



            <!-- ここからフォーム -->
            <form>
                <fieldset>
                    <legend>基本情報</legend>
                    <label for="name">お名前:</label> <input id="name" type="text" name="お名前">
                    <label for="mail">メールアドレス: </label><input id="mail" type="text" name="メールアドレス">

                   <label>区分</label> 
                    <input id="personal" type="radio" name="区分" value="個人の方"><label for="personal">個人の方</label>
                    <input id="corporation" type="radio" name="区分" value="企業の方"><label for="corporation">企業の方</label>
                </fieldset>

                <fieldset>
                    <legend>お問い合わせ本文</legend>

                    <label for="category">お問い合わせの種類</label>
                    <select id="category" name="お問い合わせの種類">

                        <optgroup label="業務について">
                            <option>デザイン業務について</option>
                            <option>講師業について</option>
                            <option>DTP制作について</option>
                            <option>プロダクトデザインについて</option>
                        </optgroup>

                        <optgroup label="制作について">
                              <option>納期について</option>
                            <option>価格について</option>
                            <option>支払い方法について</option>
                            <option>その他</option>

               </optgroup>







                    </select>

                    <label for="para">本文:</label>
                    <textarea id="para" name="本文" placeholder="お問い合わせ内容など、自由にお書きください。"></textarea>

                    <label>確認</label>
                    <input id="yes" type="checkbox" name="確認" value="規約に同意します">
                    <label for="yes">規約に同意します</label>


                </fieldset>

css

* {
    margin: 0;
    padding: 0;
}

body {
    font-family: 'Lato', sans-serif;
    font-size: 14px;
    color: #595758;
    background-color: #f2f2f2;
}

.clearfix:after {
  content: ".";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}

header {
    background-color: white;
    border-top: 3px solid #B19956;
}

h1, h2 {
    width: 900px;
    margin: 0 auto;
}

h1 a {
    color: #555;
    text-decoration: none;
    font-size: 28px;
    font-weight: 900;
    display: block;
    margin: 20px 0 0 0;
}
h1 a:hover {
    color: #333;
}

h2 {
    color: #555;
    font-size: 16px;
    padding: 10px 0 0 0;
    font-weight: 100;
}

nav {
    background-color: #EBEBE7;
    margin: 30px 0 0 0;
}
nav ul {
    width: 900px;
    margin: 0 auto;
}
nav ul li {
    list-style: none;
    display: inline-block;
}
nav ul li a {
    font-size: 12px;
    text-decoration: none;
    margin: 0 30px 0 0;
    display: block;
    padding: 20px 0;
    font-weight: 900;
    color: #444;
}
nav ul li a:hover {
    color: #B19956;
}


div p {
    text-align: center;
    padding: 30px 0;
    background-color: #FFFFFF;
}


div h3 {
    text-align: center;
    margin: 45px 0 30px 0;
    padding: 0 20px;
    font-size: 30px;
}


div ul {
    max-width: 900px;
    margin: 0 auto 50px auto;
    list-style: none;
}
div ul li {
    width: 240px;
    padding: 30px 15px;
    margin: 10px;
    display: inline-block;
    background-color: #fff;
    border: 1px solid #EDE6DC;
    text-align: center;
    font-weight: 900;
    font-size: 20px;
}
div ul li a {
    text-decoration: none;
    color: #444;
    line-height: 45px;
    display: block;
}
div ul li a:hover {
    color: #B19956;
}






footer {
    clear: both;
    text-align: center;
    background-color: #2D2D2D;
    color: #fff;
    padding: 30px 0;
    font-size: 12px;
}

input#yes {
    width: 20px;
}











/* ==================
    Aboutページ用css
================== */

div section {
    margin: 50px auto;
    width: 900px;
}
div section h1,
table caption {
    font-size: 14px;
    border-left: 3px solid #B19956;
    line-height: 1;
    padding: 0 0 0 10px;
    margin: 0 0 20px 0;
    text-align: left;
    font-weight: 900;
}
div section img {
    width: 400px;
    display: block;
    margin: 0 20px 0 0;
    float: left;
}
div section header {
    display: block;
    width: 430px;
    padding: 20px;
    float: right;
}
div section header h2 {
    width: 400px;
    margin: 0 0 20px 0;
    padding: 0;
    font-size: 16px;
    font-weight: 900;
}
div section header p {
    widows: 400px;
    font-size: 12px;
    text-align: left;
    padding: 0;
    line-height: 18px;
}






/* ==================
    Aboutページーーテーブル用css
================== */
#skill {
    clear: both;
    width: 900px;
    margin: 0px auto;
    padding: 30px 0;
}


table {
    text-align: left;
    width: 900px;
    margin: 30px auto;
}
table tr {
    font-size: 13px;
}
tbody {
    background-color: #fff;
    margin: 0;
}
thead {
    background-color: #2D2D2D;
    color: #fff!important;
    margin: 0;
}
thead tr th {
    background-color: #2D2D2D;
    color: #fff!important;
    font-size: 15px;
    padding: 5px;
    margin: 0;
}
table tr th {
    padding: 5px;
}
table tr td {
    padding: 5px;
    color: #666666;
}

table tr:nth-child(2n) {
    background-color: #E2E1DE;
}

tfoot tr td {
    text-decoration: underline;
    font-size: 12px;
    font-style: italic;
    color: #b8b8b8;
    padding: 0;
}
















/* ==================
    Contactページ用css
================== */



form {
    width: 900px;
    background-color: #fff;
    padding: 30px;
    margin: 30px auto 60px;
}

legend {
    font-size: 22px;
    font-weight: 900;
    margin: 0 0 15px 0;
    color: #B19956;
}

label {
    display: block;
    text-align: left;
    font-size: 16px;
    font-weight: 900;
    margin: 0 0 5px 0;
}

form input, form textarea,select {
    padding: 10px;
    margin: 2px 0 20px;
    border: 1px solid #EBEBE7;
    width: 880px;
    font-size: 13px;
}

#personal,#corporation,#varify {
    float: left;
    width: 20px;
    height: 15px;
    margin: 0 0 5px 0;
}
.left {
    float: left;
    height: 20px;
    line-height: 1.3;
    font-size: 13px;
    font-weight: 100;
    margin: 0 15px 0 0;
}

select {
    width: 100%;
}

fieldset {
    margin: 0 0 30px 0;
    border: 0;
    border-bottom: 1px solid #ebebe7;
    padding: 0 0 30px 0;
}

optgroup {
    color: #b4b4b4;
}
select option {
    margin: 0 0 0 15px;
    color: #000;
}

button {
    background-color: #B19956;
    color: #fff;
    border: none;
    width: 400px;
    padding: 10px 0;
    margin: 0 0 20px 0;
    border-radius: 6px;
    font-weight: 900;
    display: block;
    margin: 0 auto 20px auto;
}
#reset {
    background-color: #EBEBE7;
    color: #555;
}
button:hover {
    cursor: pointer;
    opacity: 0.8;
}






コード
  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • thyda.eiqau

    2019/09/02 14:25

    スタイルシートも提示してください

    キャンセル

回答 3

checkベストアンサー

+1

form input, form textarea,select {
    padding: 10px;
    margin: 2px 0 20px;
    border: 1px solid #EBEBE7;
    width: 880px;
    font-size: 13px;
}

ここの指定が効いていて、チェックボックスの幅が880pxになっているのではないでしょうか

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

0

label に display: block; があるからですね。
ほかのに合わせるならここも float: left では?

input#yes {
    float: left;
}

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

0

治りました。すみません 
最初に回答くださった方をベストアンサーにさせていただきました・・・。

HTMLにおいて、ID名が日本語になってたからだと思われます。
勉強がんばります。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2019/09/02 16:08

    提示されたコードにおいて日本語になっているところはないです。
    本当に解決したのでしょうか?

    キャンセル

  • 2019/10/27 08:41

    ごめんなさい、今返信に気づきました汗 くわしく覚えていないのが正直なところなのですが(すみません・・・)一応解決しました。すみません、ありがとうございます。

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 89.13%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる