CSSでmargin-left: -20px;という記述はありですか？

質問

ulの●の部分がどうしても左にレイアウトされてしまうので、ul部分を全体的に右に動かしたいと思っています。

しかし下記のようにマイマスをつかいことぐらいしか思いつきませんでした。

文法上？これは問題ないのでしょうか。
また、他に良い方法があったら教えてください。

div#content ul {
margin-left: -20px;
margin-bottom: 1em;
margin-right: 20px;
margin-left:1em;
}

回答No.2

quads · ベストアンサー

全体を右に動かすなら、左マージンに正の値を指定することになると思うのですが。

理想とされているものが何なのか把握できませんでした。
リストマーカーがどうあればよいのでしょうか。

ul {
margin: 0 20px 1em 20px;
padding: 0;
}
ul li {
list-style-position: outside;
}

マーカーをリストの内側にすることで解決できる問題なら、
ul li {
list-style-position: inside;
}
にしてください。

タイトルに関しては、負のマージン値は指定可能です。

補足

すいません、質問が間違っていることに気がつきました・・・

ulのリスト表示の右側に画像を挿入したいのですが、リスト表示と画像の位置が同列に並びません。
それで画像を下記のようにマイマスにしてみたらうまく表示されました。

文法上？これは問題ないのでしょうか。
また、他に良い方法があったら教えてください。

.img {
　　　margin: -65px 30px 1em;
　　　float: right;
}

と書くべきでした。申し訳ありませんでした。
せっかくお返事頂いたのに申し訳ありませんが、よかったまた教えて頂けると幸いです。

回答No.4

noname#23734

Negative values for margin properties are allowed, but there may be implementation-specific limits

マージンの特性のための負の数は許容されていますが、実現特有の限界があるかもしれません。

http://www.w3.org/TR/1998/REC-CSS2-19980512/box.html#margin-properties
の一部を
http://www.excite.co.jp/world/english/
exciteで翻訳しておきました。

お礼

お返事遅くなってしまいました。
どうもありがとうございました。

回答No.3

quads

> ulのリスト表示の右側に画像を挿入したいのですが、リスト表示と画像の位置が同列に並びません。
> それで画像を下記のようにマイマスにしてみたらうまく表示されました。
> .img {
>　　　margin: -65px 30px 1em;
>　　　float: right;
> }

セレクタがタイプセレクタでなくクラスセレクタになっていますが、このクラス属性値を持つ要素が不明です。

最小限のHTMLと関係するCSSを併せて提示するか、理想とされる形を把握できるだけの説明をしていただかないと、

> 他に良い方法があったら教えてください。
適する方法を教示できません。

お礼

お返事遅くなってしまいました。
説明不足でした。どうもありがとうございました。

回答No.1

dezimac

CSSでマイナス値を指定する事は自体はなんら問題ありません。

単にリスト表示の●がじゃまだというのなら、
ul li{list-style:none;}
とすればいいです。

あと、提示されているCSSの指定だと
最初と最後に
「margin-left: -20px;」
「margin-left:1em;」
とありすが、これだと最初の無視されて最後の1em;が適用されますよ。

参考URL：

http://www.tohoho-web.com/css/reference.htm#list

補足

すいません、質問が間違っていることに気がつきました・・・

ulのリスト表示の右側に画像を挿入したいのですが、リスト表示と画像の位置が同列に並びません。
それで画像を下記のようにマイマスにしてみたらうまく表示されました。

文法上？これは問題ないのでしょうか。
また、他に良い方法があったら教えてください。

.img {
　　　margin: -65px 30px 1em;
　　　float: right;
}

と書くべきでした。申し訳ありませんでした。
せっかくお返事頂いたのに申し訳ありませんが、よかったまた教えて頂けると幸いです。