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

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

新規登録して質問してみよう
ただいま回答率
85.50%
HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

2回答

5566閲覧

li の中のdiv 上に空白ができる

sssshin

総合スコア27

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

1グッド

0クリップ

投稿2016/05/09 11:11

編集2016/05/09 13:52

質問お願いします。

人物紹介画面で左側に写真、右側に2段でテキスト入れれるようにしてるのですが、右側の2段それぞれに上になぜか空白ができます。
何が行けないのでしょうか?
ご教授お願いします。

html

1<div class="menberbox"> 2<ul style="list-style:none;"> 3 <li><div class="menberimg"> 4<img src="***画像url"> 5 </div></li> 6 <li> 7 <div class="menprof"> 8 <div class="prof1"> 9 テキストテキストテキストテキスト 10 </div> 11 <div class="prof2"> 12 テキストテキストテキストテキスト 13 </div> 14 </div> 15 </li> 16</ul> 17</div>

css

1.menberbox { 2width:100%; 3height:240px; 4margin:0 3px 0px 0; 5min-width:400px; 6border: solid 3px pink; 7} 8 9.menberbox ul li{ 10float:left; 11width:50%; 12 13margin: 0px; 14padding: 0px; 15} 16.menberimg { 17 18} 19 20 21.menprof { 22background-color:pink; 23margin: 0px; 24padding: 0px; 25} 26.prof1 { 27max-height:100px; 28 border-bottom: 1px solid #000000; 29overflow-y:auto; 30margin: 0px; 31padding: 0px; 32} 33.prof2 { 34max-height:100px; 35overflow-y:auto; 36margin: 0px; 37padding: 0px; 38}

margin: 0px;
padding: 0px;
はいろんなとこに入れて試してるから多いかもしれません。

よろしくお願いします。

ブラウザ環境はクロームです。wordpressでしています。
個別ページにhtml書き、
cssにcssを書いてます。

イメージ説明
スクショでは.prof2 {に border-top: 1px solid #000000; を入れ
.prof2 {
max-height:100px;
overflow-y:auto;
margin: 0px;
padding: 0px;
border-top: 1px solid #000000;
}
に変更してるので線が二つあります。上の行の下のラインと下の行の上ラインとの間がそのくらいあります。消えません。

追記2

今liに何が当たってるかブラウザで調べてたらpが入ってます。コードの方ではちゃんと入ってないのですが。なぜでしょう?
下の段にはpが邪魔してて上の段には何もないけど隙間があります。

イメージ説明

html

1 </div></li> 2<li> 3 <div class="menprof"> 4 <div class="prof1"> 5テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト 6 </div> 7 <div class="prof2"> 8テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト 9 </div> 10 </div> 11 </li> 12</ul> 13</div>
kei344👍を押しています

気になる質問をクリップする

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

kei344

2016/05/09 11:39

ブラウザ環境やスクリーンショットなどを提示いただけませんか?
kei344

2016/05/09 12:36

掲載されている以外にCSS(テーマに使用しているものなど)が適用されていませんか?
sssshin

2016/05/09 13:22

cssへの記入はたくさんありますが、ここに書いてあるclassに関してはここで作成したクラス名なので他で何かしらの影響がある感じではないです。 一応ですが子ページの一番下に書いてます。
guest

回答2

0

こんにちは。

ul自体のmarginが消せてないからだとおもいます。

/追記/
あと、個人的にfloatが好きではないのでこんなのどうでしょう?
inline-blockとか使ってはどうでしょう?
(clearしないといけないのが。。。。だいっきらい!!ww)

css

1.menberbox { 2width:100%; 3margin:0 3px 0px 0; 4min-width:400px; 5 6box-shadow: 0px 0px 0px 3px pink; 7} 8 9.menberbox ul{ 10 margin:0px; 11 padding:0px; 12 font-size: 0px; 13 padding-top:10px; 14} 15 16.menberbox ul li{ 17display: inline-block; 18width:50%; 19 20vertical-align: top; 21font-size: 16px; 22margin: 0px; 23padding-bottom: 20px; 24} 25.menberimg { 26 27} 28.menberimg img{ 29 height:200px; 30 width:100%; 31} 32 33 34.menprof { 35background-color:pink; 36margin: 0px; 37padding: 0px; 38} 39.prof1 { 40max-height:100px; 41 border-bottom: 1px solid #000000; 42overflow-y:auto; 43margin: 0px; 44padding: 0px; 45} 46.prof2 { 47max-height:100px; 48overflow-y:auto; 49margin: 0px; 50padding: 0px; 51}

/追記/
コメント書くのめんどいのでこちらに追記していきます。

p問題・・・これってカスタムフィールドとかつかって「テキストテキスト.....」って入力してませんか?

<li>の中に<div>を二つ入れてるのがいけないとかあるのでしょうか?
あんまり気持ちよくないですが「いけない」訳ではないと個人的には思います。
でも自分が意図しない結果になるのなら作りを変えるのも手だと思います。

はみ出し問題・・・先に述べたようにfloatのため現状height固定してるから。
でも固定しないと枠がちっちゃくなるんですよね?なのでfloat使うときはclearしないといけなくてめんどいのです。。。。

上の子問題・・・上の子にもカーソルを合わせていただけると。。。画像だけじゃみんなわからないので

あと、sytle部分もスクショなりとってほしいです。できるだけ多くの情報があったほうが導き出しやすいので。
あと最終的にここをこうしたいの!!ってのも現状から再度お伝えいただければ。。。

投稿2016/05/09 11:49

編集2016/05/09 14:16
kogure

総合スコア299

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

sssshin

2016/05/09 12:06

どうしたらいいでしょうか? .menberbox ul { margin: 0px; padding: 0px; } は追加して見ましたが変わらずです
sssshin

2016/05/09 13:21

回答ありがとうございます。 コピペして試したのですが、ほぼ同じでうまくいきません。 スクショのだとテキストの文字が少ないですが、下の段の文字多くしたら外枠を大きくはみ出します。 <li>の中に<div>を二つ入れてるのがいけないとかあるのでしょうか?
kogure

2016/05/09 13:31

kei344さんが回答してくれているようにほかのテーマがあたってる可能性ありますね line-height決まってそうだし。。。 テーマのcssを一度コメントアウトなりしてみてはいかがでしょうか? あと上の回答ピンクのborder-top部分にliがピッタリくっつかないの何で?って意味とはき違えていました。。。。text部分の質問だったんですね。すみません。 divに現状styleなにがあたっているか確認いただけますと幸いです。
sssshin

2016/05/09 13:53

いわれて調べてたらおかしな点が見つかったので追記しまいた。 よろしければ確認おねがいします。
guest

0

ベストアンサー

記事の本文エリアにHTMLを入れている場合、自動整形に巻き込まれることがあります。
HTMLの周りの改行及びスペース(タブ)を削除することで自動改行などが行われないかもしれません。
(HTMLを記述する際はカスタムフィールドなど整形を受けにくい箇所に入れたほうが問題が起こりにくいです)

【WordPressの自動整形(ビジュアルエディタ含む)を無効にする方法 - Qiita】
http://qiita.com/jyokyoku/items/c560b0d1eacc1df61620

【[WordPress] プラグイン不要!WordPressの自動整形を無効・解除する方法 | ぶぶりんブログ】
http://buburinweb.wp.xdomain.jp/wordpress-automatic-forming-plugin


下の段の文字多くしたら外枠を大きくはみ出します

CSS

1.menberbox { overflow: hidden; }

投稿2016/05/09 15:01

kei344

総合スコア69364

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

sssshin

2016/05/09 15:33

解決しました!どうやらスペースとか改行が悪さしてたみたいです! 助かりましたし勉強になりました!ありがとうございます。! 他の方もありがとうございます!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問